diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index fa487e001a..ff7d48ae4f 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -891,6 +891,7 @@ form.bs-docs-example {
   min-height: 1px;
 }
 .bs-docs-sidenav {
+  width: 218px;
   margin-top: 40px;
   padding: 0;
   margin-right: 10px;
@@ -935,24 +936,39 @@ form.bs-docs-example {
   background-image: url(../img/glyphicons-halflings-white.png);
   opacity: .75;
 }
-
 .bs-docs-sidenav.affix {
   top: 40px;
 }
 
-@media (max-width: 979px) {
-
-  .bs-docs-sidenav.affix {
-    top: 0px;
-  }
-
+@media (min-width: 1200px) {
   .bs-docs-sidenav {
+    width: 258px;
+  }
+}
+
+@media (max-width: 979px) {
+  .bs-docs-sidenav {
+    top: 0px;
     margin-top: 30px;
     margin-right: 0;
   }
-
 }
 
+@media (min-width: 768px) and (max-width: 979px) {
+  .bs-docs-sidenav {
+    width: 166px;
+  }
+}
+
+@media (max-width: 767px) {
+  .bs-docs-sidenav {
+    width: auto;
+  }
+  .bs-docs-sidenav.affix {
+    position: relative;
+    width: auto;
+  }
+}
 
 @media (min-width: 979px) {
   .masthead,
@@ -983,10 +999,4 @@ form.bs-docs-example {
   .subhead + .bs-docs-canvas {
     top: 250px;
   }
-}
-
-@media (max-width: 767px) {
-  .bs-docs-sidenav.affix {
-    position: relative;
-  }
-}
+}
\ No newline at end of file
diff --git a/docs/base-css.html b/docs/base-css.html
index d83076bf69..5987abc532 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -86,7 +86,7 @@
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav">
+        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
           <li><a href="#typography">Typography <i class="icon-chevron-right"></i></a></li>
           <li><a href="#code">Code <i class="icon-chevron-right"></i></a></li>
           <li><a href="#tables">Tables <i class="icon-chevron-right"></i></a></li>
diff --git a/docs/components.html b/docs/components.html
index b867c2c35b..8198de37f6 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -86,7 +86,7 @@
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav">
+        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
           <li><a href="#dropdowns">Dropdowns <i class="icon-chevron-right"></i></a></li>
           <li><a href="#buttonGroups">Button groups <i class="icon-chevron-right"></i></a></li>
           <li><a href="#buttonDropdowns">Button dropdowns <i class="icon-chevron-right"></i></a></li>
diff --git a/docs/customize.html b/docs/customize.html
index 2e216c3150..5c81f54f25 100644
--- a/docs/customize.html
+++ b/docs/customize.html
@@ -86,7 +86,7 @@
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav">
+        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
           <li><a href="#components">1. Choose components</a></li>
           <li><a href="#plugins">2. Select jQuery plugins</a></li>
           <li><a href="#variables">3. Customize variables</a></li>
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 9be4d6a5ef..eb854e111b 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -86,7 +86,7 @@
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav">
+        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
           <li><a href="#download-bootstrap">Download <i class="icon-chevron-right"></i></a></li>
           <li><a href="#file-structure">File structure <i class="icon-chevron-right"></i></a></li>
           <li><a href="#contents">What's included <i class="icon-chevron-right"></i></a></li>
diff --git a/docs/javascript.html b/docs/javascript.html
index d34c9c94dd..001f974fc0 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -86,7 +86,7 @@
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav">
+        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
           <li><a href="#overview">Overview <i class="icon-chevron-right"></i></a></li>
           <li><a href="#transitions">Transitions <i class="icon-chevron-right"></i></a></li>
           <li><a href="#modals">Modal <i class="icon-chevron-right"></i></a></li>
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index b686d3c7c0..c36aa6d59d 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -86,7 +86,7 @@
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav">
+        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
           <li><a href="#global">Global styles <i class="icon-chevron-right"></i></a></li>
           <li><a href="#gridSystem">Grid system <i class="icon-chevron-right"></i></a></li>
           <li><a href="#fluidGridSystem">Fluid grid system <i class="icon-chevron-right"></i></a></li>
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index bbfed726d1..0a22423c81 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -15,7 +15,7 @@
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav">
+        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
           <li><a href="#typography">{{_i}}Typography{{/i}} <i class="icon-chevron-right"></i></a></li>
           <li><a href="#code">{{_i}}Code{{/i}} <i class="icon-chevron-right"></i></a></li>
           <li><a href="#tables">{{_i}}Tables{{/i}} <i class="icon-chevron-right"></i></a></li>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 10dd0901ee..c2e7fef6c6 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -15,7 +15,7 @@
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav">
+        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
           <li><a href="#dropdowns">{{_i}}Dropdowns{{/i}} <i class="icon-chevron-right"></i></a></li>
           <li><a href="#buttonGroups">{{_i}}Button groups{{/i}} <i class="icon-chevron-right"></i></a></li>
           <li><a href="#buttonDropdowns">{{_i}}Button dropdowns{{/i}} <i class="icon-chevron-right"></i></a></li>
diff --git a/docs/templates/pages/customize.mustache b/docs/templates/pages/customize.mustache
index 7a0affef6f..0498684705 100644
--- a/docs/templates/pages/customize.mustache
+++ b/docs/templates/pages/customize.mustache
@@ -15,7 +15,7 @@
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav">
+        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
           <li><a href="#components">{{_i}}1. Choose components{{/i}}</a></li>
           <li><a href="#plugins">{{_i}}2. Select jQuery plugins{{/i}}</a></li>
           <li><a href="#variables">{{_i}}3. Customize variables{{/i}}</a></li>
diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache
index fbe4b365f3..4a4c976c50 100644
--- a/docs/templates/pages/getting-started.mustache
+++ b/docs/templates/pages/getting-started.mustache
@@ -15,7 +15,7 @@
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav">
+        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
           <li><a href="#download-bootstrap">{{_i}}Download{{/i}} <i class="icon-chevron-right"></i></a></li>
           <li><a href="#file-structure">{{_i}}File structure{{/i}} <i class="icon-chevron-right"></i></a></li>
           <li><a href="#contents">{{_i}}What's included{{/i}} <i class="icon-chevron-right"></i></a></li>
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index dc1e0293bc..d63bdae4ec 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -15,7 +15,7 @@
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav">
+        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
           <li><a href="#overview">{{_i}}Overview{{/i}} <i class="icon-chevron-right"></i></a></li>
           <li><a href="#transitions">{{_i}}Transitions{{/i}} <i class="icon-chevron-right"></i></a></li>
           <li><a href="#modals">{{_i}}Modal{{/i}} <i class="icon-chevron-right"></i></a></li>
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index 5a613a45fa..ff5af7c0c0 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -15,7 +15,7 @@
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav">
+        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
           <li><a href="#global">{{_i}}Global styles{{/i}} <i class="icon-chevron-right"></i></a></li>
           <li><a href="#gridSystem">{{_i}}Grid system{{/i}} <i class="icon-chevron-right"></i></a></li>
           <li><a href="#fluidGridSystem">{{_i}}Fluid grid system{{/i}} <i class="icon-chevron-right"></i></a></li>