mo betta sidenav for responsive hotness

1 files changed, 30 insertions, 8 deletions

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index f973c6395..7c086d903 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;
+}
+.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
 -------------------------------------------------- */