fix static navbar container issues, clean up docs presentation by unfixing the top navbar in favor of static one, start adding table of contents for longer sections of docs

18 files changed, 78 insertions, 52 deletions

diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index 394a15b4a..821c9603f 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -110,6 +110,7 @@
     margin-left: 30px;
   }
   .container,
+  .navbar-static-top .container,
   .navbar-fixed-top .container,
   .navbar-fixed-bottom .container {
     width: 1170px;
@@ -455,6 +456,7 @@
     margin-left: 20px;
   }
   .container,
+  .navbar-static-top .container,
   .navbar-fixed-top .container,
   .navbar-fixed-bottom .container {
     width: 724px;
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 38829e7d5..3c16ef2f5 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -219,6 +219,7 @@ a:hover {
 }
 
 .container,
+.navbar-static-top .container,
 .navbar-fixed-top .container,
 .navbar-fixed-bottom .container {
   width: 940px;
@@ -4172,7 +4173,8 @@ input[type="submit"].btn.btn-mini {
 }
 
 .navbar-fixed-top .navbar-inner,
-.navbar-fixed-bottom .navbar-inner {
+.navbar-fixed-bottom .navbar-inner,
+.navbar-static-top .navbar-inner {
   border: 0;
 }
 
@@ -4185,6 +4187,7 @@ input[type="submit"].btn.btn-mini {
           border-radius: 0;
 }
 
+.navbar-static-top .container,
 .navbar-fixed-top .container,
 .navbar-fixed-bottom .container {
   width: 940px;
@@ -4194,7 +4197,8 @@ input[type="submit"].btn.btn-mini {
   top: 0;
 }
 
-.navbar-fixed-top .navbar-inner {
+.navbar-fixed-top .navbar-inner,
+.navbar-static-top .navbar-inner {
   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
      -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
           box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index e12f46a99..2801efe5e 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -12,7 +12,6 @@
 
 body {
   position: relative;
-  padding-top: 40px;
 }
 
 /* Code in headings */
@@ -26,12 +25,12 @@ h3 code {
 /* Tweak navbar brand link to be super sleek
 -------------------------------------------------- */
 
-body > .navbar-fixed-top {
+body > .navbar-static-top {
   font-size: 13px;
 }
 
 /* Change the docs' brand */
-body > .navbar-fixed-top .brand {
+body > .navbar-static-top .brand {
   padding-right: 0;
   padding-left: 0;
   margin-left: 20px;
@@ -43,7 +42,7 @@ body > .navbar-fixed-top .brand {
      -moz-transition: all .2s linear;
           transition: all .2s linear;
 }
-body > .navbar-fixed-top .brand:hover {
+body > .navbar-static-top .brand:hover {
   text-decoration: none;
   text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.4);
 }
@@ -54,7 +53,7 @@ body > .navbar-fixed-top .brand:hover {
 
 /* padding for in-page bookmarks and fixed navbar */
 section {
-  padding-top: 60px;
+  padding-top: 30px;
 }
 section > .page-header,
 section > .lead {
@@ -759,10 +758,9 @@ form.bs-docs-example {
 }
 
 .bs-docs-sidenav {
-  width: 218px;
+  width: 228px;
   margin-top: 30px;
   padding: 0;
-  margin-right: 10px;
   background-color: #fff;
   margin-left: 0;
   -webkit-border-radius: 6px;
@@ -790,9 +788,13 @@ form.bs-docs-example {
           border-radius: 0 0 6px 6px;
 }
 .bs-docs-sidenav > .active > a {
-  border-color: #08c;
   position: relative;
   z-index: 2;
+  padding: 9px 15px;
+  border: 0;
+  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
+     -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
+          box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
 }
 /* Chevrons */
 .bs-docs-sidenav .icon-chevron-right {
@@ -807,12 +809,13 @@ form.bs-docs-example {
 .bs-docs-sidenav a:hover .icon-chevron-right {
   opacity: .5;
 }
-.bs-docs-sidenav .active .icon-chevron-right {
+.bs-docs-sidenav .active .icon-chevron-right,
+.bs-docs-sidenav .active a:hover .icon-chevron-right {
   background-image: url(../img/glyphicons-halflings-white.png);
   opacity: .75;
 }
 .bs-docs-sidenav.affix {
-  top: 40px;
+  top: 0;
 }
 .bs-docs-sidenav.affix-bottom {
   position: absolute;
@@ -869,18 +872,11 @@ form.bs-docs-example {
   body {
     padding-top: 0;
   }
-  /* Widen masthead and social buttons to fill body padding */
-  .jumbotron {
-    margin-top: -20px; /* Offset bottom margin on .navbar */
-  }
   /* Adjust sidenav width */
   .bs-docs-sidenav {
     width: 166px;
     margin-top: 20px;
   }
-  .bs-docs-sidenav.affix {
-    top: 0;
-  }
 }
 
 /* Tablet
@@ -936,9 +932,6 @@ form.bs-docs-example {
   .footer p {
     margin-bottom: 9px;
   }
-  .bs-docs-sidenav.affix {
-    top: 0;
-  }
 }
 
 /* Landscape phones
diff --git a/docs/base-css.html b/docs/base-css.html
index df5df2402..95267c5b5 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -27,11 +27,11 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+  <body data-spy="scroll" data-target=".bs-docs-sidebar">
 
     <!-- Navbar
     ================================================== -->
-    <div class="navbar navbar-inverse navbar-fixed-top">
+    <div class="navbar navbar-inverse navbar-static-top">
       <div class="navbar-inner">
         <div class="container">
           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
@@ -106,7 +106,15 @@
             <h1>Typography</h1>
           </div>
 
-          <h2>Headings</h2>
+          <ul>
+            <li><a href="./base-css.html#headings">Headings</a></li>
+            <li><a href="./base-css.html#body-copy">Body copy</a></li>
+            <li><a href="./base-css.html#emphasis">Emphasis</a></li>
+          </ul>
+
+          <hr>
+
+          <h2 id="headings">Headings</h2>
           <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>
           <div class="bs-docs-example">
             <h1>h1. Heading 1</h1>
@@ -117,7 +125,7 @@
             <h6>h6. Heading 6</h6>
           </div>
 
-          <h2>Body copy</h2>
+          <h2 id="body-copy">Body copy</h2>
           <p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (9px by default).</p>
           <div class="bs-docs-example">
             <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
@@ -133,14 +141,14 @@
           </div>
           <pre class="prettyprint">&lt;p class="lead"&gt;...&lt;/p&gt;</pre>
 
-          <h2>Built with Less</h2>
+          <h3>Built with Less</h3>
           <p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>
 
 
           <hr class="bs-docs-separator">
 
 
-          <h2>Emphasis</h2>
+          <h2 id="emphasis">Emphasis</h2>
           <p>Make use of HTML's default emphasis tags with lightweight styles.</p>
 
           <h3><code>&lt;small&gt;</code></h3>
diff --git a/docs/components.html b/docs/components.html
index 6312a3041..40f145756 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -27,11 +27,11 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+  <body data-spy="scroll" data-target=".bs-docs-sidebar">
 
     <!-- Navbar
     ================================================== -->
-    <div class="navbar navbar-inverse navbar-fixed-top">
+    <div class="navbar navbar-inverse navbar-static-top">
       <div class="navbar-inner">
         <div class="container">
           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
diff --git a/docs/customize.html b/docs/customize.html
index b24685196..8d6a59cd9 100644
--- a/docs/customize.html
+++ b/docs/customize.html
@@ -27,11 +27,11 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+  <body data-spy="scroll" data-target=".bs-docs-sidebar">
 
     <!-- Navbar
     ================================================== -->
-    <div class="navbar navbar-inverse navbar-fixed-top">
+    <div class="navbar navbar-inverse navbar-static-top">
       <div class="navbar-inner">
         <div class="container">
           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
diff --git a/docs/extend.html b/docs/extend.html
index 1c6447b3e..f5a194702 100644
--- a/docs/extend.html
+++ b/docs/extend.html
@@ -27,11 +27,11 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+  <body data-spy="scroll" data-target=".bs-docs-sidebar">
 
     <!-- Navbar
     ================================================== -->
-    <div class="navbar navbar-inverse navbar-fixed-top">
+    <div class="navbar navbar-inverse navbar-static-top">
       <div class="navbar-inner">
         <div class="container">
           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 6323f2cfa..ac38f3863 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -27,11 +27,11 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+  <body data-spy="scroll" data-target=".bs-docs-sidebar">
 
     <!-- Navbar
     ================================================== -->
-    <div class="navbar navbar-inverse navbar-fixed-top">
+    <div class="navbar navbar-inverse navbar-static-top">
       <div class="navbar-inner">
         <div class="container">
           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
diff --git a/docs/index.html b/docs/index.html
index 3233287ed..efc82d55c 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -27,11 +27,11 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+  <body data-spy="scroll" data-target=".bs-docs-sidebar">
 
     <!-- Navbar
     ================================================== -->
-    <div class="navbar navbar-inverse navbar-fixed-top">
+    <div class="navbar navbar-inverse navbar-static-top">
       <div class="navbar-inner">
         <div class="container">
           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
diff --git a/docs/javascript.html b/docs/javascript.html
index 4a4fb41eb..7ac86841f 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -27,11 +27,11 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+  <body data-spy="scroll" data-target=".bs-docs-sidebar">
 
     <!-- Navbar
     ================================================== -->
-    <div class="navbar navbar-inverse navbar-fixed-top">
+    <div class="navbar navbar-inverse navbar-static-top">
       <div class="navbar-inner">
         <div class="container">
           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
@@ -71,7 +71,7 @@
 
 <!-- Subhead
 ================================================== -->
-<header class="jumbotron subhead" id="overview">
+<header class="jumbotron subhead">
   <div class="container">
     <h1>JavaScript for Bootstrap</h1>
     <p class="lead">Bring Bootstrap's components to life&mdash;now with 13 custom jQuery plugins.
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index b8b663a7c..c30d17764 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -27,11 +27,11 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+  <body data-spy="scroll" data-target=".bs-docs-sidebar">
 
     <!-- Navbar
     ================================================== -->
-    <div class="navbar navbar-inverse navbar-fixed-top">
+    <div class="navbar navbar-inverse navbar-static-top">
       <div class="navbar-inner">
         <div class="container">
           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache
index eb4cc9ef4..f98f31897 100644
--- a/docs/templates/layout.mustache
+++ b/docs/templates/layout.mustache
@@ -39,11 +39,11 @@
     {{/production}}
   </head>
 
-  <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+  <body data-spy="scroll" data-target=".bs-docs-sidebar">
 
     <!-- Navbar
     ================================================== -->
-    <div class="navbar navbar-inverse navbar-fixed-top">
+    <div class="navbar navbar-inverse navbar-static-top">
       <div class="navbar-inner">
         <div class="container">
           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index d1d8691ba..53ded2d87 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -35,8 +35,16 @@
             <h1>{{_i}}Typography{{/i}}</h1>
           </div>
 
+          <ul>
+            <li><a href="./base-css.html#headings">Headings</a></li>
+            <li><a href="./base-css.html#body-copy">Body copy</a></li>
+            <li><a href="./base-css.html#emphasis">Emphasis</a></li>
+          </ul>
+
+          <hr>
+
           {{! Headings }}
-          <h2>{{_i}}Headings{{/i}}</h2>
+          <h2 id="headings">{{_i}}Headings{{/i}}</h2>
           <p>{{_i}}All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.{{/i}}</p>
           <div class="bs-docs-example">
             <h1>h1. {{_i}}Heading 1{{/i}}</h1>
@@ -48,7 +56,7 @@
           </div>
 
           {{! Body copy }}
-          <h2>{{_i}}Body copy{{/i}}</h2>
+          <h2 id="body-copy">{{_i}}Body copy{{/i}}</h2>
           <p>{{_i}}Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (9px by default).{{/i}}</p>
           <div class="bs-docs-example">
             <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
@@ -66,7 +74,7 @@
           <pre class="prettyprint">&lt;p class="lead"&gt;...&lt;/p&gt;</pre>
 
           {{! Using LESS }}
-          <h2>{{_i}}Built with Less{{/i}}</h2>
+          <h3>{{_i}}Built with Less{{/i}}</h3>
           <p>{{_i}}The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.{{/i}}</p>
 
 
@@ -74,7 +82,7 @@
 
 
           {{! Emphasis }}
-          <h2>{{_i}}Emphasis{{/i}}</h2>
+          <h2 id="emphasis">{{_i}}Emphasis{{/i}}</h2>
           <p>{{_i}}Make use of HTML's default emphasis tags with lightweight styles.{{/i}}</p>
 
           <h3><code>&lt;small&gt;</code></h3>
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index ccec7eb24..c9e1b612b 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -1,6 +1,6 @@
 <!-- Subhead
 ================================================== -->
-<header class="jumbotron subhead" id="overview">
+<header class="jumbotron subhead">
   <div class="container">
     <h1>{{_i}}JavaScript for Bootstrap{{/i}}</h1>
     <p class="lead">{{_i}}Bring Bootstrap's components to life&mdash;now with 13 custom jQuery plugins.{{/i}}
diff --git a/less/mixins.less b/less/mixins.less
index 68fbb5829..b6352831f 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -580,6 +580,7 @@
 
     // Set the container width, and override it for fixed navbars in media queries
     .container,
+    .navbar-static-top .container,
     .navbar-fixed-top .container,
     .navbar-fixed-bottom .container { .span(@gridColumns); }
 
diff --git a/less/navbar.less b/less/navbar.less
index 3a7e074b2..70501e459 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -165,6 +165,10 @@
   left: 0;
   z-index: @zindexFixedNavbar;
   margin-bottom: 0; // remove 18px margin for default navbar
+}
+.navbar-fixed-top,
+.navbar-fixed-bottom,
+.navbar-static-top {
   .navbar-inner {
     border: 0;
   }
@@ -177,6 +181,8 @@
 }
 
 // Reset container width
+// Required here as we reset the width earlier on and the grid mixins don't override early enough
+.navbar-static-top .container,
 .navbar-fixed-top .container,
 .navbar-fixed-bottom .container {
   #grid > .core > .span(@gridColumns);
@@ -185,6 +191,9 @@
 // Fixed to top
 .navbar-fixed-top {
   top: 0;
+}
+.navbar-fixed-top,
+.navbar-static-top {
   .navbar-inner {
     .box-shadow(~"inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1)");
   }
diff --git a/less/scaffolding.less b/less/scaffolding.less
index fe63c7cac..342dcf705 100644
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -48,4 +48,4 @@ a:hover {
 
 .img-circle {
   .border-radius(500px);
-}
\ No newline at end of file
+}
diff --git a/less/utilities.less b/less/utilities.less
index 5eef70fe7..314b4ffdb 100644
--- a/less/utilities.less
+++ b/less/utilities.less
@@ -24,6 +24,7 @@
   visibility: hidden;
 }
 
+// For Affix plugin
 .affix {
   position: fixed;
-}
\ No newline at end of file
+}