overhaul navbar behavior in responsive css

3 files changed, 118 insertions, 73 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) {
 
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 2ae5325b2..fb95729d9 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Fri Jan 27 15:27:51 PST 2012
+ * Date: Fri Jan 27 16:25:59 PST 2012
  */
 article,
 aside,
@@ -2004,7 +2004,7 @@ table .span12 {
   color: #ffffff;
   text-decoration: none;
 }
-.navbar .nav .active > a {
+.navbar .nav .active > a, .navbar .nav .active > a:hover {
   color: #ffffff;
   text-decoration: none;
   background-color: #222222;
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index bc3c97106..cf4b1962f 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -723,6 +723,11 @@ form.well {
 
 @media (max-width: 768px) {
 
+  /* Remove any padding from the body */
+  body {
+    padding-top: 0;
+  }
+
   /* Subnav */
   .subnav {
     position: static;
@@ -745,13 +750,6 @@ form.well {
     border-top: 1px solid #e5e5e5;
   }
 
-  /* Adjust the jumbotron */
-  .jumbotron .benefits {
-    position: relative;
-    width: auto;
-    margin: 36px 0;
-  }
-
   /* Popovers */
   .large-bird {
     display: none;
@@ -787,9 +785,14 @@ form.well {
   .jumbotron h1 {
     font-size: 54px;
   }
+  .masthead p {
+    font-size: 25px;
+    line-height: 36px;
+  }
   .jumbotron h1,
   .jumbotron p {
     margin-right: 0;
+    margin-left: 0;
   }
 
 }
@@ -797,15 +800,27 @@ form.well {
 
 @media (min-width: 768px) and (max-width: 940px) {
 
+  /* Remove any padding from the body */
+  body {
+    padding-top: 0;
+  }
+
   /* Scale down the jumbotron content */
   .jumbotron h1 {
     font-size: 72px;
   }
 
-  /* Provide enough space on right-hand side for benefits list */
-  .jumbotron h1,
-  .jumbotron p {
-    margin-right: 40%;
+}
+
+@media (max-width: 940px) {
+  
+  /* Unfloat brand */
+  .navbar-fixed-top .brand {
+    float: none;
+    margin-left: 0;
+    padding-left: 15px;
+    padding-right: 15px;
   }
+
 }