diff --git a/website/source/layouts/_footer.erb b/website/source/layouts/_footer.erb
index 83e8ad1ff2..148e1b57aa 100644
--- a/website/source/layouts/_footer.erb
+++ b/website/source/layouts/_footer.erb
@@ -21,6 +21,8 @@
 </div>
 </div>
 
+<script type="text/javascript" src="/javascripts/lib/jquery-2.0.3.min.js"></script>
+<script type="text/javascript" src="/javascripts/lib/bootstrap.min.js"></script>
 <script type="text/javascript" src="/javascripts/lib/dbg.js"></script>
 <script type="text/javascript" src="/javascripts/lib/Base.js"></script>
 <script type="text/javascript" src="/javascripts/lib/String.substitute.js"></script>
diff --git a/website/source/stylesheets/_header.less b/website/source/stylesheets/_header.less
index 8fc7abfc1d..24800bf0db 100755
--- a/website/source/stylesheets/_header.less
+++ b/website/source/stylesheets/_header.less
@@ -348,6 +348,14 @@ body.page-sub{
     }
 }
 
+@media (max-width: 763px) {
+    .navbar-static-top {
+        .nav-white {
+            background-color:rgba(0,0,0,0.5);
+        }
+    }
+}
+
 @media (max-width: 320px) {
 
     #header{
@@ -360,6 +368,7 @@ body.page-sub{
                 .img-retina("../images/header-logo.png", "../images/header-logo@2x.png", 39px, 44px);
             }
         }
+
     }
 
     #feature-auto{
diff --git a/website/source/stylesheets/main.css b/website/source/stylesheets/main.css
index f833fc3f30..9319f3844b 100644
--- a/website/source/stylesheets/main.css
+++ b/website/source/stylesheets/main.css
@@ -367,6 +367,11 @@ body.page-sub #header .main-links.nav > li > a:focus {
     line-height: 22px;
   }
 }
+@media (max-width: 763px) {
+  .navbar-static-top .nav-white {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
 @media (max-width: 320px) {
   #header .navbar-brand.logo {
     padding: 0 0 0 54px !important;