diff --git a/docs/_includes/header.html b/docs/_includes/header.html
index de6a9c92..90ecc04f 100644
--- a/docs/_includes/header.html
+++ b/docs/_includes/header.html
@@ -1,11 +1,7 @@
 <nav class="nav">
   <div class="nav-left">
-    <a class="nav-item is-brand" href="{{ site.url }}/">
-      {% if page.route == 'index' %}
-        <img src="{{ site.url }}/images/bulma-type.png" alt="{{ site.title }}">
-      {% else %}
-        <img src="{{ site.url }}/images/bulma-type-white.png" alt="{{ site.title }}">
-      {% endif %}
+    <a class="nav-item is-brand" href="{{ site.url }}">
+      <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}">
     </a>
   </div>
 
@@ -43,7 +39,7 @@
       Blog
     </a>
 
-    {% if page.route == 'index' %}
+    {% if page.route != 'nothing' %}
       <span class="nav-item">
         <a id="twitter"
           class="button"
diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html
index f5caee24..ce06e490 100644
--- a/docs/_layouts/documentation.html
+++ b/docs/_layouts/documentation.html
@@ -3,13 +3,11 @@ layout: default
 route: documentation
 ---
 
-<section class="hero is-primary">
-  <div class="hero-head">
-    <div class="container">
-      {% include header.html %}
-    </div>
-  </div>
+<div class="container">
+  {% include header.html %}
+</div>
 
+<section class="hero is-primary">
   <div class="hero-body">
     <div class="container">
       <div class="columns is-vcentered">
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 0af8607f..5202ac16 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -94,7 +94,7 @@ th {
 }
 
 html {
-  background-color: whitesmoke;
+  background-color: white;
   font-size: 14px;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -3714,6 +3714,13 @@ a.nav-item.is-tab.is-active {
   padding-bottom: calc(0.5rem - 3px);
 }
 
+@media screen and (min-width: 1000px) {
+  .nav-item a.is-brand,
+  a.nav-item.is-brand {
+    padding-left: 0;
+  }
+}
+
 @media screen and (max-width: 768px) {
   .nav-menu {
     background-color: white;
@@ -3792,33 +3799,10 @@ a.nav-item.is-tab.is-active {
   width: 100%;
 }
 
-.nav > .container > .nav-left > .nav-item:first-child:not(.is-tab) {
-  padding-left: 0;
-}
-
-.nav > .container > .nav-right > .nav-item:last-child:not(.is-tab) {
-  padding-right: 0;
-}
-
-.container > .nav > .nav-left > .nav-item:first-child:not(.is-tab) {
-  padding-left: 0;
-}
-
-.container > .nav > .nav-right > .nav-item:last-child:not(.is-tab) {
-  padding-right: 0;
-}
-
 .nav.has-shadow {
   box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
 }
 
-@media screen and (max-width: 999px) {
-  .nav > .container > .nav-left > .nav-item.is-brand:first-child,
-  .container > .nav > .nav-left > .nav-item.is-brand:first-child {
-    padding-left: 1.5rem;
-  }
-}
-
 .pagination,
 .pagination-list {
   align-items: center;
diff --git a/docs/documentation/components/nav.html b/docs/documentation/components/nav.html
index 10d99f60..7497fe0f 100644
--- a/docs/documentation/components/nav.html
+++ b/docs/documentation/components/nav.html
@@ -24,6 +24,9 @@ doc-subtab: nav
         <li><code>nav-center</code></li>
         <li><code>nav-right</code></li>
       </ul>
+      <p>
+        Each nav item needs to be wrapped in a <code>nav-item</code> element.
+      </p>
       <p>
         For responsiveness, <strong>2 additional</strong> classes are available:
       </p>
@@ -33,41 +36,45 @@ doc-subtab: nav
       </ul>
     </div>
 
-<div class="example">
+{% capture nav_example %}
 <nav class="nav">
   <div class="nav-left">
-    <a class="nav-item is-brand" href="#">
+    <a class="nav-item">
       <img src="{{ site.url }}/images/bulma-type.png" alt="Bulma logo">
     </a>
   </div>
 
   <div class="nav-center">
-    <a class="nav-item" href="#">
+    <a class="nav-item">
       <span class="icon">
         <i class="fa fa-github"></i>
       </span>
     </a>
-    <a class="nav-item" href="#">
+    <a class="nav-item">
       <span class="icon">
         <i class="fa fa-twitter"></i>
       </span>
     </a>
   </div>
 
+  <!-- This "nav-toggle" hamburger menu is only visible on mobile -->
+  <!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->
   <span class="nav-toggle">
     <span></span>
     <span></span>
     <span></span>
   </span>
 
+  <!-- This "nav-menu" is hidden on mobile -->
+  <!-- Add the modifier "is-active" to display it on mobile -->
   <div class="nav-right nav-menu">
-    <a class="nav-item" href="#">
+    <a class="nav-item">
       Home
     </a>
-    <a class="nav-item" href="#">
+    <a class="nav-item">
       Documentation
     </a>
-    <a class="nav-item" href="#">
+    <a class="nav-item">
       Blog
     </a>
 
@@ -78,7 +85,7 @@ doc-subtab: nav
         </span>
         <span>Tweet</span>
       </a>
-      <a class="button is-primary" href="#">
+      <a class="button is-primary">
         <span class="icon">
           <i class="fa fa-download"></i>
         </span>
@@ -87,63 +94,14 @@ doc-subtab: nav
     </span>
   </div>
 </nav>
+{% endcapture %}
+
+<div class="example">
+{{nav_example}}
 </div>
 
 {% highlight html %}
-<nav class="nav">
-  <div class="nav-left">
-    <a class="nav-item is-brand" href="#">
-      <img src="{{ site.url }}/images/bulma-type.png" alt="Bulma logo">
-    </a>
-  </div>
-
-  <div class="nav-center">
-    <a class="nav-item" href="#">
-      <span class="icon">
-        <i class="fa fa-github"></i>
-      </span>
-    </a>
-    <a class="nav-item" href="#">
-      <span class="icon">
-        <i class="fa fa-twitter"></i>
-      </span>
-    </a>
-  </div>
-
-  <span class="nav-toggle">
-    <span></span>
-    <span></span>
-    <span></span>
-  </span>
-
-  <div class="nav-right nav-menu">
-    <a class="nav-item" href="#">
-      Home
-    </a>
-    <a class="nav-item" href="#">
-      Documentation
-    </a>
-    <a class="nav-item" href="#">
-      Blog
-    </a>
-
-    <span class="nav-item">
-      <a class="button" >
-        <span class="icon">
-          <i class="fa fa-twitter"></i>
-        </span>
-        <span>Tweet</span>
-      </a>
-      <a class="button is-primary" href="#">
-        <span class="icon">
-          <i class="fa fa-download"></i>
-        </span>
-        <span>Download</span>
-      </a>
-    </span>
-  </div>
-</nav>
-
+{{nav_example}}
 {% endhighlight %}
 
     <hr>
diff --git a/docs/documentation/overview/variables.html b/docs/documentation/overview/variables.html
index fea681cf..a901d7be 100644
--- a/docs/documentation/overview/variables.html
+++ b/docs/documentation/overview/variables.html
@@ -40,7 +40,7 @@ doc-subtab: variables
         <li>
           <strong>Generated variables</strong> where variables are <strong>calculated</strong> from the values set in the previous file. For example, you can have:
           <ul>
-            <li><code>$body-background: $grey-lighter</code>: the page's main background is the lighter grey</li>
+            <li><code>$body-background: $white</code>: the page's main background</li>
             <li><code>$link: $primary</code>: the links use the primary color</li>
             <li><code>$family-primary: $family-sans-serif</code>: the primary font family is the sans-serif one</li>
           </ul>
diff --git a/docs/images/bulma-logo.png b/docs/images/bulma-logo.png
new file mode 100644
index 00000000..a016c2b5
Binary files /dev/null and b/docs/images/bulma-logo.png differ
diff --git a/sass/components/nav.sass b/sass/components/nav.sass
index 12e35946..0ca444a5 100644
--- a/sass/components/nav.sass
+++ b/sass/components/nav.sass
@@ -54,6 +54,10 @@ a.nav-item
       border-bottom: 3px solid $primary
       color: $primary
       padding-bottom: calc(0.5rem - 3px)
+  // Responsiveness
+  +desktop
+    &.is-brand
+      padding-left: 0
 
 // Containers
 
@@ -120,26 +124,6 @@ a.nav-item
     display: flex
     min-height: $nav-height
     width: 100%
-    & > .nav-left
-      & > .nav-item:first-child:not(.is-tab)
-        padding-left: 0
-    & > .nav-right
-      & > .nav-item:last-child:not(.is-tab)
-        padding-right: 0
-  .container > &
-    & > .nav-left
-      & > .nav-item:first-child:not(.is-tab)
-        padding-left: 0
-    & > .nav-right
-      & > .nav-item:last-child:not(.is-tab)
-        padding-right: 0
   // Modifiers
   &.has-shadow
     box-shadow: 0 2px 3px rgba($black, 0.1)
-  // Responsiveness
-  +touch
-    & > .container,
-    .container > &
-      & > .nav-left
-        & > .nav-item.is-brand:first-child
-          padding-left: 1.5rem
diff --git a/sass/utilities/variables.sass b/sass/utilities/variables.sass
index effd8f42..4c272923 100644
--- a/sass/utilities/variables.sass
+++ b/sass/utilities/variables.sass
@@ -85,8 +85,6 @@ $light-invert: $dark !default
 $dark-invert: $light !default
 
 // General colors
-$body-background: $white-ter !default
-
 $background: $white-ter !default
 
 $border: $grey-lighter !default