From 3e40e7dfbf24a227ca03bd6144af5ecdc8399bfa Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Wed, 16 Jan 2013 13:20:32 -0800
Subject: [PATCH] mo betta sidenav for responsive hotness

---
 docs/assets/css/docs.css          | 38 ++++++++++++++++++++++++-------
 docs/css.html                     |  2 +-
 docs/templates/pages/css.mustache |  2 +-
 3 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index f973c6395c..7c086d903f 100644
--- 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;
 }
-/* Chevrons */
+.bs-docs-sidenav.affix {
+  position: static;
+  width: auto;
+  top: 0;
+}
+
+/* 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 756cec1ea9..ac6d981415 100644
--- 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 9e373dec6c..2d31dd3f64 100644
--- 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>