diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index ef54dd6..9296d15 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -19,7 +19,10 @@ whiteColor = "#ffffff"
   title = "Dot"
   dateFormat = "2 January 2006"
   home = "Home"
-  logo = "Dot"
+  # logo is for all page
+  logo = ""
+  # logo white is for homepage logo, you can use colorful logo too...
+  logoWhite = ""
   copyright = "The Hugo Documents are copyright © [gethugothemes](https://gethugothemes.com/) 2019."
 
     # navigation
diff --git a/layouts/partials/navigation.html b/layouts/partials/navigation.html
index 44bcd83..13db0c6 100644
--- a/layouts/partials/navigation.html
+++ b/layouts/partials/navigation.html
@@ -1,5 +1,17 @@
 <nav class="navbar navbar-expand-lg navbar-light">
-  <a class="navbar-brand" href="{{ .Site.BaseURL }}{{ .Language.LanguageName | lower }}">{{ .Site.Params.logo }}</a>
+  <a class="navbar-brand" href="{{ .Site.BaseURL }}{{ .Language.LanguageName | lower }}">
+    {{ $logo:= .Site.Params.logo }}
+    {{ $logoWhite:= .Site.Params.logoWhite }}
+    {{ if (or (eq $logo "") (eq $logoWhite "")) }}
+    {{ .Site.Title }}
+    {{ else }}
+    {{ if .IsHome }}
+    <img class="img-fluid" src="{{ $logoWhite | absURL }}" alt="{{ .Site.Title }}">
+    {{ else }}
+    <img class="img-fluid" src="{{ $logo | absURL }}" alt="{{ .Site.Title }}">
+    {{ end }}
+    {{ end }}
+  </a>
   <button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#navigation"
     aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>