diff --git a/docs/css/_header.sass b/docs/css/_header.sass
index f7c7921f4b..8478c5dab9 100644
--- a/docs/css/_header.sass
+++ b/docs/css/_header.sass
@@ -19,7 +19,7 @@ header.site-header
         padding-bottom: 1em
     .navbar-brand
       font-weight: 600
-      color: white !important
+      color: white
       z-index: 1
     .navbar-header
       position: relative
diff --git a/docs/index.haml b/docs/index.haml
index a568a8ae41..359855f911 100644
--- a/docs/index.haml
+++ b/docs/index.haml
@@ -106,39 +106,41 @@ layout: default
               {% svg img/sync.svg %}
 .spacer100
 
-%svg#curveUpColor{xmlns:"http://www.w3.org/2000/svg", version:"1.1", width:"100%", height:"100", viewBox:"0 0 100 100", preserveAspectRatio:"none"}
-  %path{d:"M0 100 C40 0 60 0 100 100 Z"}
+%section.white-bottom
 
-%section.bg-white
-  .container
-    .spacer100
-    .row
-      .col-md-4.col-md-offset-2.col-sm-offset-2.col-sm-8.m-b
-        %section#instantsearch-vp-1
-          .text-center
-            .illus-wrapper
-              %img{src:"img/icon-ux.svg", alt:"UX", width:40}
-            %h2 Search UX done right
-          %p Algolia strives to build the best search experience for the end users. All of the best practices we learned while implementing search on hundreds of websites are now packed into our widgets.
-      .col-md-4.col-md-offset-0.col-sm-offset-2.col-sm-8
-        %section#instantsearch-vp-2
-          .text-center
-            .illus-wrapper
-              %img{src:"img/icon-update.svg", alt:"Update", width:40}
-            %h2 Always improving
-          %p The instant-search experience is already deployed in hundreds of websites. We inject all the feedback and collective experience we get back into the widgets.
-    .spacer100
-    #panel-get-started
+  %svg#curveUpColor{xmlns:"http://www.w3.org/2000/svg", version:"1.1", width:"100%", height:"100", viewBox:"0 0 100 100", preserveAspectRatio:"none"}
+    %path{d:"M0 100 C40 0 60 0 100 100 Z"}
+
+  %section.bg-white
+    .container
+      .spacer100
       .row
-        .col-sm-8.text-right
-          .spacer5
-          %span.h4
-            %strong Explore Instantsearch.js.
-            Learn more about instant search's features and widgets.
-        .col-sm-4
-          %a.btn.btn-primary{href: "{{ '/documentation/' | prepend: site.baseurl }}"} Get started with Instantsearch.js
+        .col-md-4.col-md-offset-2.col-sm-offset-2.col-sm-8.m-b
+          %section#instantsearch-vp-1
+            .text-center
+              .illus-wrapper
+                %img{src:"img/icon-ux.svg", alt:"UX", width:40}
+              %h2 Search UX done right
+            %p Algolia strives to build the best search experience for the end users. All of the best practices we learned while implementing search on hundreds of websites are now packed into our widgets.
+        .col-md-4.col-md-offset-0.col-sm-offset-2.col-sm-8
+          %section#instantsearch-vp-2
+            .text-center
+              .illus-wrapper
+                %img{src:"img/icon-update.svg", alt:"Update", width:40}
+              %h2 Always improving
+            %p The instant-search experience is already deployed in hundreds of websites. We inject all the feedback and collective experience we get back into the widgets.
+      .spacer100
+      #panel-get-started
+        .row
+          .col-sm-8.text-right
+            .spacer5
+            %span.h4
+              %strong Explore Instantsearch.js.
+              Learn more about instant search's features and widgets.
+          .col-sm-4
+            %a.btn.btn-primary{href: "{{ '/documentation/' | prepend: site.baseurl }}"} Get started with Instantsearch.js
 
-{% contentfor site-footer %}
+  {% contentfor site-footer %}
 
 <script type="text/javascript" src="{{ "/js/home.js" | prepend: site.baseurl }}"></script>
 
diff --git a/docs/js/home.js b/docs/js/home.js
index f163f6324a..695403fe7f 100644
--- a/docs/js/home.js
+++ b/docs/js/home.js
@@ -115,14 +115,31 @@ $(function () {
 
   scenes[0].on('start', function () {
     intro.seek(20);
-    TweenMax.to('header.site-header nav.navbar', 0.4, {backgroundColor:'rgba(0,0,0,0)'});
   });
 
   scenes[3].on('leave', function () {
     $('body:after').addClass('hide');
-    TweenMax.to('header.site-header nav.navbar', 0.4, {backgroundColor:'rgba(0,0,0,1)'});
   });
 
+  var isMenuOverWhite = false;
+  $(window).load(checkMenuOverWhite)
+  // change the menu to use black font when we arrive at the white background
+  $(window).scroll(throttle(checkMenuOverWhite, 50));
+
+  function checkMenuOverWhite() {
+    var $navbar = $('.site-header .navbar');
+    var $whiteBottom = $('.white-bottom');
+    var currentIsMenuOverWhite = overlap($navbar, $whiteBottom);
+
+    if (currentIsMenuOverWhite !== isMenuOverWhite) {
+      isMenuOverWhite = currentIsMenuOverWhite;
+      if (isMenuOverWhite) {
+        TweenMax.to('header.site-header nav.navbar a', 0.1, {color:'rgba(0,0,0,1)'});
+      } else {
+        TweenMax.to('header.site-header nav.navbar a', 0.1, {color:'rgba(255,255,255,1)'});
+      }
+    }
+  }
 });
 
 
@@ -216,3 +233,38 @@ Star.prototype.draw = function() {
   context.fill();
   context.restore();
 };
+
+// http://stackoverflow.com/questions/14012766/detecting-whether-two-divs-overlap
+function overlap($div1, $div2) {
+  var rect1 = $div1[0].getBoundingClientRect();
+  var rect2 = $div2[0].getBoundingClientRect();
+
+  return !(rect1.right < rect2.left ||
+    rect1.left > rect2.right ||
+    rect1.bottom < rect2.top + 80 ||
+    rect1.top > rect2.bottom);
+}
+
+// https://remysharp.com/2010/07/21/throttling-function-calls
+function throttle(fn, threshhold, scope) {
+  threshhold || (threshhold = 250);
+  var last,
+      deferTimer;
+  return function () {
+    var context = scope || this;
+
+    var now = +new Date,
+        args = arguments;
+    if (last && now < last + threshhold) {
+      // hold on to it
+      clearTimeout(deferTimer);
+      deferTimer = setTimeout(function () {
+        last = now;
+        fn.apply(context, args);
+      }, threshhold);
+    } else {
+      last = now;
+      fn.apply(context, args);
+    }
+  };
+}