mo betta sidenav for responsive hotness

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index f973c6395cb328e25a2f066343154964073de54d..7c086d903f37a5c5402413d62d42b06e8665bf11 100644 (file)
--- a/docs/assets/css/docs.css
+++ b/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
 -------------------------------------------------- */
 

diff --git a/docs/css.html b/docs/css.html
index 756cec1ea9e36fa958c9f8e0b30d34f9cdc8e4f5..ac6d98141582a04b2828342a3dc461221634d64e 100644 (file)
--- a/docs/css.html
+++ b/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>

diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache
index 9e373dec6ca82c5fe45b52833051df2a18cecf63..2d31dd3f64d04d9e5e50831fd5861024d4ef44d3 100644 (file)
--- a/docs/templates/pages/css.mustache
+++ b/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>