nav cleanup and responsiveness

docs/_includes/nav/docs.html

@@ -1,6 +1,76 @@
-<div id="top"></div>
+<header class="navbar navbar-static-top bs-docs-sidebar" id="top" role="banner">
+  <div class="container-fluid">
+    <div class="navbar-header">
+      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-sidenav-collapse">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a href="../" class="navbar-brand">Bootstrap</a>
+    </div>
+    <nav class="collapse navbar-collapse bs-sidenav-collapse" role="navigation">
+      <div class="bs-docs-toc-item{% if page.slug == "getting-started" %} active{% endif %}">
+        <a class="bs-docs-toc-link" href="../getting-started">Getting started</a>
+        {% if page.slug == "getting-started" %}
+        <ul class="nav bs-docs-sidenav">
+          {% include nav/getting-started.html %}
+        </ul>
+        {% endif %}
+      </div>
+      <div class="bs-docs-toc-item{% if page.slug == "css" %} active{% endif %}">
+        <a class="bs-docs-toc-link" href="../css">CSS</a>
+        {% if page.slug == "css" %}
+        <ul class="nav bs-docs-sidenav">
+          {% include nav/css.html %}
+        </ul>
+        {% endif %}
+      </div>
+      <div class="bs-docs-toc-item{% if page.slug == "components" %} active{% endif %}">
+        <a class="bs-docs-toc-link" href="../components">Components</a>
+        {% if page.slug == "components" %}
+        <ul class="nav bs-docs-sidenav">
+          {% include nav/components.html %}
+        </ul>
+        {% endif %}
+      </div>
+      <div class="bs-docs-toc-item{% if page.slug == "js" %} active{% endif %}">
+        <a class="bs-docs-toc-link" href="../javascript">JavaScript</a>
+        {% if page.slug == "js" %}
+        <ul class="nav bs-docs-sidenav">
+          {% include nav/javascript.html %}
+        </ul>
+        {% endif %}
+      </div>
+      <div class="bs-docs-toc-item{% if page.slug == "customize" %} active{% endif %}">
+        <a class="bs-docs-toc-link" href="../customize">Customize</a>
+        {% if page.slug == "customize" %}
+        <ul class="nav bs-docs-sidenav">
+          {% include nav/customize.html %}
+        </ul>
+        {% endif %}
+      </div>
+      <div class="bs-docs-toc-item{% if page.slug == "js" %} active{% endif %}">
+        <a class="bs-docs-toc-link" href="../about">About</a>
+        {% if page.slug == "js" %}
+        <ul class="nav bs-docs-sidenav">
+          {% include nav/about.html %}
+        </ul>
+        {% endif %}
+      </div>
+      <div class="bs-docs-toc-item{% if page.slug == "migration" %} active{% endif %}">
+        <a class="bs-docs-toc-link" href="../migration">Migrating to v3.x</a>
+        {% if page.slug == "migration" %}
+        <ul class="nav bs-docs-sidenav">
+          {% include nav/migration.html %}
+        </ul>
+        {% endif %}
+      </div>
+    </nav>
+  </div>
+</header>
 
-<div class="bs-docs-sidebar">
+<div class="bs-docs-sidebar" style="display: none;">
   <a href="../" class="bs-docs-sidebar-brand">Bootstrap</a>
 
   <div class="bs-docs-toc">

docs/assets/css/src/docs.css

@@ -396,9 +396,16 @@ body {
 .carbonad #azcarbon > img {
   display: none; /* hide what I assume are tracking images */
 }
+
+/* In the lighter page headers */
 .bs-docs-header .carbonad {
-  color: #cdbfe3;
+  color: #777;
-  background-color: #866ab3 !important;
+  background-color: #fff !important;
+  border-color: #eee !important;
+}
+.bs-docs-header .carbonad-text a,
+.bs-docs-header .carbonad-tag a {
+  color: #563d7c !important;
 }
 
 @media (min-width: 480px) {
@@ -535,9 +542,6 @@ body {
  * sections of docs content.
  */
 
-.bs-docs {
-  padding-left: 240px;
-}
 .bs-docs-container {
   position: relative;
   max-width: 940px;
@@ -555,27 +559,60 @@ body {
 }
 
 .bs-docs-sidebar {
-  position: fixed;
+  margin-bottom: 0;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 240px;
-  padding-bottom: 30px;
-  overflow-x: hidden;
-  overflow-y: auto;
   background-color: #322f38;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#29262f), to(#322f38));
-  background-image: -webkit-linear-gradient(top, #29262f 0%, #322f38 100%);
-  background-image:      -o-linear-gradient(top, #29262f 0%, #322f38 100%);
-  background-image:         linear-gradient(to bottom, #29262f 0%, #322f38 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#29262f', endColorstr='#322f38', GradientType=0);
-  background-repeat: repeat-x;
 }
 
-.bs-docs-sidebar-brand {
+.bs-docs-sidebar .navbar-toggle {
+  position: absolute;
+  top: 5px;
+  right: 0;
+  z-index: 5;
+}
+.bs-docs-sidebar .navbar-toggle .icon-bar {
+  background-color: #fff;
+}
+
+.bs-docs-sidebar .navbar-header {
+  float: none;
+  margin-right: -15px;
+}
+
+.bs-docs-sidebar .navbar-collapse {
+  padding: 0;
+  border: 0;
+}
+
+@media (min-width: 992px) {
+  .bs-docs {
+    padding-left: 240px;
+  }
+  .bs-docs-sidebar {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 240px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#29262f), to(#322f38));
+    background-image: -webkit-linear-gradient(top, #29262f 0%, #322f38 100%);
+    background-image:      -o-linear-gradient(top, #29262f 0%, #322f38 100%);
+    background-image:         linear-gradient(to bottom, #29262f 0%, #322f38 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#29262f', endColorstr='#322f38', GradientType=0);
+    background-repeat: repeat-x;
+  }
+  .bs-docs-sidebar .navbar-brand {
+    margin-bottom: 15px;
+  }
+}
+
+
+.bs-docs-sidebar .navbar-brand {
   display: block;
+  float: none;
+  height: auto;
   padding: 20px;
-  margin-bottom: 15px;
   font-size: 20px;
   font-weight: 500;
   line-height: 1;
@@ -589,7 +626,6 @@ body {
   text-decoration: none;
 }
 
-
 .bs-docs-sidenav {
   display: none;
 }
@@ -602,12 +638,12 @@ body {
 }
 .bs-docs-toc-link:hover,
 .bs-docs-toc-link:focus {
-  color: #fff;
+  color: #ffe484;
   text-decoration: none;
 }
 .active > .bs-docs-toc-link {
   font-weight: 500;
-  color: #fff;
+  color: #ffe484;
 }
 .active > .bs-docs-sidenav {
   display: block;
@@ -617,37 +653,39 @@ body {
   margin-top: 15px;
   margin-bottom: 15px;
 }
-
+.bs-docs-toc-item:last-child {
+  margin-bottom: 30px;
+}
 
 /* All levels of nav */
-.bs-docs-toc .nav > li > a {
+.bs-docs-sidebar .nav > li > a {
   display: block;
   padding: 4px 20px;
   font-size: 14px;
   color: #99979c;
 }
-.bs-docs-toc .nav > li > a:hover,
+.bs-docs-sidebar .nav > li > a:hover,
-.bs-docs-toc .nav > li > a:focus {
+.bs-docs-sidebar .nav > li > a:focus {
-  color: #fff;
+  color: #ffe484;
   text-decoration: none;
   background-color: transparent;
 }
-.bs-docs-toc .nav > .active > a,
+.bs-docs-sidebar .nav > .active > a,
-.bs-docs-toc .nav > .active:hover > a,
+.bs-docs-sidebar .nav > .active:hover > a,
-.bs-docs-toc .nav > .active:focus > a {
+.bs-docs-sidebar .nav > .active:focus > a {
   font-weight: 500;
-  color: #fff;
+  color: #ffe484;
   background-color: transparent;
 }
 
 /* Nav: second level (shown on .active) */
-.bs-docs-toc .nav .nav {
+.bs-docs-sidebar .nav .nav {
   display: none;
 }
-.bs-docs-toc .nav > .active > .nav {
+.bs-docs-sidebar .nav > .active > .nav {
   display: block;
 }
-.bs-docs-toc .nav .nav > li > a {
+.bs-docs-sidebar .nav .nav > li > a {
   padding-top: 2px;
   padding-bottom: 2px;
   padding-left: 30px;