overhaul navbar behavior in responsive css

1 files changed, 90 insertions, 60 deletions

diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index 6886105cb..8b1d98b5c 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -3,60 +3,6 @@
   visibility: hidden;
 }
 @media (max-width: 480px) {
-  .navbar .nav {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 180px;
-    padding-top: 40px;
-    list-style: none;
-  }
-  .navbar .nav, .navbar .nav > li:last-child a {
-    -webkit-border-radius: 0 0 4px 0;
-    -moz-border-radius: 0 0 4px 0;
-    border-radius: 0 0 4px 0;
-  }
-  .navbar .nav > li {
-    float: none;
-    display: none;
-  }
-  .navbar .nav > li > a {
-    float: none;
-    background-color: #222;
-  }
-  .navbar .nav > .active {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-  .navbar .nav > .active > a {
-    background-color: transparent;
-  }
-  .navbar .nav > .active > a:hover {
-    background-color: #333;
-  }
-  .navbar .nav > .active > a:after {
-    display: inline-block;
-    width: 0;
-    height: 0;
-    margin-top: 8px;
-    margin-left: 6px;
-    text-indent: -99999px;
-    vertical-align: top;
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
-    border-top: 4px solid #ffffff;
-    opacity: 1;
-    filter: alpha(opacity=100);
-    content: "↓";
-  }
-  .navbar .nav:hover > li {
-    display: block;
-  }
-  .navbar .nav:hover > li > a:hover {
-    background-color: #333;
-  }
   .form-horizontal .control-group > label {
     float: none;
     width: auto;
@@ -88,12 +34,6 @@
   }
 }
 @media (max-width: 768px) {
-  .navbar-fixed {
-    position: absolute;
-  }
-  .navbar-fixed .nav {
-    float: none;
-  }
   .container {
     width: auto;
     padding: 0 20px;
@@ -187,6 +127,96 @@
     margin-left: 788px;
   }
 }
+@media (max-width: 940px) {
+  body {
+    padding-top: 0;
+  }
+  .navbar-fixed-top {
+    position: static;
+    margin-bottom: 36px;
+  }
+  .navbar-inner {
+    padding: 10px;
+    background-image: none;
+  }
+  .navbar .container {
+    padding: 0;
+  }
+  .navbar .brand {
+    float: none;
+    display: block;
+    padding-left: 15px;
+    padding-right: 15px;
+    margin: 0;
+  }
+  .navbar .nav {
+    float: none;
+    margin: 9px 0;
+  }
+  .navbar .nav > li {
+    float: none;
+  }
+  .navbar .nav > li > a {
+    margin-bottom: 2px;
+  }
+  .navbar .nav > .vertical-divider {
+    display: none;
+  }
+  .navbar .nav > li > a, .navbar .dropdown-menu a {
+    padding: 6px 15px;
+    font-weight: bold;
+    color: #999999;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+  }
+  .navbar .dropdown-menu li + li a {
+    margin-bottom: 2px;
+  }
+  .navbar .nav > li > a:hover, .navbar .dropdown-menu a:hover {
+    background-color: #222222;
+  }
+  .navbar .dropdown-menu {
+    position: static;
+    display: block;
+    float: none;
+    max-width: none;
+    margin: 0 15px;
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+  }
+  .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
+    display: none;
+  }
+  .navbar .dropdown-menu .divider {
+    display: none;
+  }
+  .navbar-form, .navbar-search {
+    float: none;
+    padding: 9px 15px;
+    margin: 9px 0;
+    border-top: 1px solid #222222;
+    border-bottom: 1px solid #222222;
+    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+  }
+  .navbar .nav.pull-right {
+    float: none;
+    margin-left: 0;
+  }
+  .navbar-static .navbar-inner {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
 /*
 @media (min-width: 1210px) {