mo betta sidenav for responsive hotness

docs/assets/css/docs.css

@@ -160,11 +160,20 @@ section > ul li {
 /* Sidenav
 -------------------------------------------------- */
 
+/* Base styles are not affixable given mobile-first */
 .bs-docs-sidenav {
-  width: 218px;
   margin: 20px 0 0;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.bs-docs-sidenav.affix {
+  position: static;
+  width: auto;
+  top: 0;
 }
-/* Chevrons */
+
+/* Chevrons within each link */
 .bs-docs-sidenav .glyphicon-chevron-right {
   float: right;
   margin-top: 1px;
@@ -180,17 +189,30 @@ section > ul li {
   color: #fff;
   opacity: 1;
 }
-.bs-docs-sidenav.affix {
-  top: 10px;
+
+/* Affix all the things, and set widths because they're positioned, depending on viewport size */
+@media screen and (min-width: 768px) {
+  .bs-docs-sidenav.affix {
+    position: fixed;
+    top: 10px;
+    width: 170px;
+  }
+  .bs-docs-sidenav.affix-bottom {
+    position: absolute;
+    top: auto;
+    bottom: 270px;
+  }
 }
-.bs-docs-sidenav.affix-bottom {
-  position: absolute;
-  top: auto;
-  bottom: 270px;
+
+@media screen and (min-width: 992px) {
+  .bs-docs-sidenav.affix {
+    width: 220px;
+  }
 }
 
 
 
+
 /* Bootstrap code examples
 -------------------------------------------------- */
 

docs/css.html

@@ -91,7 +91,7 @@
           <li><a href="#forms"><i class="glyphicon-chevron-right"></i> Forms</a></li>
           <li><a href="#buttons"><i class="glyphicon-chevron-right"></i> Buttons</a></li>
           <li><a href="#images"><i class="glyphicon-chevron-right"></i> Images</a></li>
-          <li><a href="#icons"><i class="glyphicon-chevron-right"></i> Icons by Glyphicons</a></li>
+          <li><a href="#icons"><i class="glyphicon-chevron-right"></i> Glyphicons</a></li>
           <li><a href="#responsive"><i class="glyphicon-chevron-right"></i> Responsive design</a></li>
         </ul>
       </div>

docs/templates/pages/css.mustache

@@ -23,7 +23,7 @@
           <li><a href="#forms"><i class="glyphicon-chevron-right"></i> Forms</a></li>
           <li><a href="#buttons"><i class="glyphicon-chevron-right"></i> Buttons</a></li>
           <li><a href="#images"><i class="glyphicon-chevron-right"></i> Images</a></li>
-          <li><a href="#icons"><i class="glyphicon-chevron-right"></i> Icons by Glyphicons</a></li>
+          <li><a href="#icons"><i class="glyphicon-chevron-right"></i> Glyphicons</a></li>
           <li><a href="#responsive"><i class="glyphicon-chevron-right"></i> Responsive design</a></li>
         </ul>
       </div>