rewrite the navbar section

3 files changed, 392 insertions, 235 deletions

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 83533ea78..889e3008d 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -52,7 +52,7 @@ h3 code {
 .subnav {
   font-size: 13px;
 }
-.navbar-fixed-top .brand {
+body > .navbar-fixed-top .brand {
   padding-right: 0;
   padding-left: 0;
   margin-left: 20px;
@@ -64,7 +64,7 @@ h3 code {
      -moz-transition: all .2s linear;
           transition: all .2s linear;
 }
-.navbar-fixed-top .brand:hover {
+body > .navbar-fixed-top .brand:hover {
   text-decoration: none;
 }
 
@@ -744,12 +744,39 @@ form.well {
 .bs-docs-example .well,
 .bs-docs-example .alert,
 .bs-docs-example .hero-unit,
-.bs-docs-example .pagination {
+.bs-docs-example .pagination,
+.bs-docs-example .navbar {
   margin-bottom: 5px;
 }
 .bs-docs-example .pagination {
   margin-top: 0;
 }
+.bs-navbar-top-example,
+.bs-navbar-bottom-example {
+  z-index: 1;
+  padding: 0;
+  height: 90px;
+}
+.bs-navbar-top-example {
+  -webkit-border-radius: 0 0 4px 4px;
+     -moz-border-radius: 0 0 4px 4px;
+          border-radius: 0 0 4px 4px;
+}
+.bs-navbar-top-example:after {
+  top: auto;
+  bottom: -1px;
+  -webkit-border-radius: 0 4px 0 4px;
+     -moz-border-radius: 0 4px 0 4px;
+          border-radius: 0 4px 0 4px;
+}
+.bs-navbar-bottom-example {
+  -webkit-border-radius: 4px 4px 0 0;
+     -moz-border-radius: 4px 4px 0 0;
+          border-radius: 4px 4px 0 0;
+}
+.bs-navbar-bottom-example .navbar {
+  margin-bottom: 0;
+}
 form.bs-docs-example {
   padding-bottom: 19px;
 }
diff --git a/docs/components.html b/docs/components.html
index 5ff824476..933d89a36 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -896,105 +896,213 @@
   <div class="page-header">
     <h1>Navbar</h1>
   </div>
-  <h2>Static navbar example</h2>
-  <p>An example of a static (not fixed to the top) navbar with project name, navigation, and search form.</p>
-  <div class="navbar">
-    <div class="navbar-inner">
-      <div class="container">
-        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-        </a>
-        <a class="brand" href="#">Title</a>
-        <div class="nav-collapse">
-          <ul class="nav">
-            <li class="active"><a href="#">Home</a></li>
-            <li><a href="#">Link</a></li>
-            <li><a href="#">Link</a></li>
-            <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-              <ul class="dropdown-menu">
-                <li><a href="#">Action</a></li>
-                <li><a href="#">Another action</a></li>
-                <li><a href="#">Something else here</a></li>
-                <li class="divider"></li>
-                <li class="nav-header">Nav header</li>
-                <li><a href="#">Separated link</a></li>
-                <li><a href="#">One more separated link</a></li>
-              </ul>
-            </li>
-          </ul>
-          <form class="navbar-search pull-left" action="">
-            <input type="text" class="search-query span2" placeholder="Search">
-          </form>
-          <ul class="nav pull-right">
-            <li><a href="#">Link</a></li>
-            <li class="divider-vertical"></li>
-            <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-              <ul class="dropdown-menu">
-                <li><a href="#">Action</a></li>
-                <li><a href="#">Another action</a></li>
-                <li><a href="#">Something else here</a></li>
-                <li class="divider"></li>
-                <li><a href="#">Separated link</a></li>
-              </ul>
-            </li>
-          </ul>
-        </div><!-- /.nav-collapse -->
-      </div>
-    </div><!-- /navbar-inner -->
-  </div><!-- /navbar -->
 
 
-  <h3>Navbar scaffolding</h3>
-  <p>The navbar requires only a few divs to structure it well for static or fixed display.</p>
+  <h2>Basic navbar</h2>
+  <p>To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.</p>
+  <div class="bs-docs-example">
+    <div class="navbar">
+      <div class="navbar-inner">
+        <a class="brand" href="#">Title</a>
+        <ul class="nav">
+          <li class="active"><a href="#">Home</a></li>
+          <li><a href="#">Link</a></li>
+          <li><a href="#">Link</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
 <pre class="prettyprint linenums">
 &lt;div class="navbar"&gt;
   &lt;div class="navbar-inner"&gt;
-    &lt;div class="container"&gt;
-      ...
-    &lt;/div&gt;
+    &lt;a class="brand" href="#"&gt;Title&lt;/a&gt;
+    &lt;ul class="nav"&gt;
+      &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
+    &lt;/ul&gt;
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-  <h3>Fixed navbar</h3>
-  <p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.</p>
+
+
+  <hr class="bs-docs-separator">
+
+
+  <h2>Navbar components</h2>
+
+  <h3>Brand</h3>
+  <p>A simple link to show your brand or project name only requires an anchor tag.</p>
 <pre class="prettyprint linenums">
-&lt;div class="navbar navbar-fixed-top"&gt;
-  ...
-&lt;/div&gt;
+&lt;a class="brand" href="#"&gt;Project name&lt;/a&gt;
 </pre>
+
+  <h3>Nav links</h3>
+  <p>Nav items are simple to add via unordered lists.</p>
 <pre class="prettyprint linenums">
-&lt;div class="navbar navbar-fixed-bottom"&gt;
-  ...
-&lt;/div&gt;
+&lt;ul class="nav"&gt;
+  &lt;li class="active"&gt;
+    &lt;a href="#">Home&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
 </pre>
-
-  <p>When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
-  <h3>Brand name</h3>
-  <p>A simple link to show your brand or project name only requires an anchor tag.</p>
+  <p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:</p>
 <pre class="prettyprint linenums">
-&lt;a class="brand" href="#"&gt;
-  Project name
-&lt;/a&gt;
+&lt;ul class="nav"&gt;
+  ...
+  &lt;li class="divider-vertical"&gt;&lt;/li&gt;
+  ...
+&lt;/ul&gt;
 </pre>
-  <h3>Forms in navbar</h3>
+
+  <h3>Forms</h3>
   <p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
 <pre class="prettyprint linenums">
 &lt;form class="navbar-form pull-left"&gt;
   &lt;input type="text" class="span2"&gt;
 &lt;/form&gt;
 </pre>
+
+  <h3>Search form</h3>
   <p>For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.</p>
 <pre class="prettyprint linenums">
 &lt;form class="navbar-search pull-left"&gt;
   &lt;input type="text" class="search-query" placeholder="Search"&gt;
 &lt;/form&gt;
 </pre>
-  <h3>Optional responsive variation</h3>
-  <p>Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.</p>
+
+  <h3>Component alignment</h3>
+  <p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
+
+  <h3>Using dropdowns</h3>
+  <p>Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">dropdowns javascript plugin</a>.</p>
+<pre class="prettyprint linenums">
+&lt;ul class="nav"&gt;
+  &lt;li class="dropdown"&gt;
+    &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown">
+      Account
+      &lt;b class="caret"&gt;&lt;/b&gt;
+    &lt;/a&gt;
+    &lt;ul class="dropdown-menu"&gt;
+      ...
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+  <p>Visit the <a href="./javascript.html#dropdowns">javascript dropdowns documentation</a> for more markup and information on calling dropdowns.</p>
+
+  <h3>Text</h3>
+  <p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
+
+
+  <hr class="bs-docs-separator">
+
+
+  <h2>Fixed navigation</h2>
+  <p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.</p>
+
+  <h3>Fixed to top</h3>
+  <p>Add <code>.navbar-fixed-top</code> and remember to account for the hidden area underneath it by adding at least 40px <code>padding</code> to the <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
+  <div class="bs-docs-example bs-navbar-top-example">
+    <div class="navbar navbar-fixed-top" style="position: absolute;">
+      <div class="navbar-inner">
+        <div class="container" style="width: auto; padding: 0 20px;">
+          <a class="brand" href="#">Title</a>
+          <ul class="nav">
+            <li class="active"><a href="#">Home</a></li>
+            <li><a href="#">Link</a></li>
+            <li><a href="#">Link</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+<pre class="prettyprint linenums">
+&lt;div class="navbar navbar-fixed-top"&gt;
+  ...
+&lt;/div&gt;
+</pre>
+
+  <h3>Fixed to bottom</h3>
+  <p>Add <code>.navbar-fixed-bottom</code> instead.</p>
+  <div class="bs-docs-example bs-navbar-bottom-example">
+    <div class="navbar navbar-fixed-bottom" style="position: absolute;">
+      <div class="navbar-inner">
+        <div class="container" style="width: auto; padding: 0 20px;">
+          <a class="brand" href="#">Title</a>
+          <ul class="nav">
+            <li class="active"><a href="#">Home</a></li>
+            <li><a href="#">Link</a></li>
+            <li><a href="#">Link</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+<pre class="prettyprint linenums">
+&lt;div class="navbar navbar-fixed-bottom"&gt;
+  ...
+&lt;/div&gt;
+</pre>
+
+
+  <hr class="bs-docs-separator">
+
+
+  <h2>Responsive navbar</h2>
+  <p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.</p>
+  <div class="bs-docs-example">
+    <div class="navbar">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </a>
+          <a class="brand" href="#">Title</a>
+          <div class="nav-collapse">
+            <ul class="nav">
+              <li class="active"><a href="#">Home</a></li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                <ul class="dropdown-menu">
+                  <li><a href="#">Action</a></li>
+                  <li><a href="#">Another action</a></li>
+                  <li><a href="#">Something else here</a></li>
+                  <li class="divider"></li>
+                  <li class="nav-header">Nav header</li>
+                  <li><a href="#">Separated link</a></li>
+                  <li><a href="#">One more separated link</a></li>
+                </ul>
+              </li>
+            </ul>
+            <form class="navbar-search pull-left" action="">
+              <input type="text" class="search-query span2" placeholder="Search">
+            </form>
+            <ul class="nav pull-right">
+              <li><a href="#">Link</a></li>
+              <li class="divider-vertical"></li>
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                <ul class="dropdown-menu">
+                  <li><a href="#">Action</a></li>
+                  <li><a href="#">Another action</a></li>
+                  <li><a href="#">Something else here</a></li>
+                  <li class="divider"></li>
+                  <li><a href="#">Separated link</a></li>
+                </ul>
+              </li>
+            </ul>
+          </div><!-- /.nav-collapse -->
+        </div>
+      </div><!-- /navbar-inner -->
+    </div><!-- /navbar -->
+  </div>
 <pre class="prettyprint linenums">
 &lt;div class="navbar"&gt;
   &lt;div class="navbar-inner"&gt;
@@ -1023,49 +1131,6 @@
     <strong>Heads up!</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
   </div>
 
-  <h3>Nav links</h3>
-  <p>Nav items are simple to add via unordered lists.</p>
-<pre class="prettyprint linenums">
-&lt;ul class="nav"&gt;
-  &lt;li class="active"&gt;
-    &lt;a href="#">Home&lt;/a&gt;
-  &lt;/li&gt;
-  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
-  <p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:</p>
-<pre class="prettyprint linenums">
-&lt;ul class="nav"&gt;
-  ...
-  &lt;li class="divider-vertical"&gt;&lt;/li&gt;
-  ...
-&lt;/ul&gt;
-</pre>
-  <h3>Component alignment</h3>
-  <p>To align a nav, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
-  <h3>Adding dropdown menus</h3>
-  <p>Adding dropdowns and dropups to the nav is super simple, but does require the use of <a href="./javascript.html#dropdowns">our javascript plugin</a>.</p>
-<pre class="prettyprint linenums">
-&lt;ul class="nav"&gt;
-  &lt;li class="dropdown"&gt;
-    &lt;a href="#"
-          class="dropdown-toggle"
-          data-toggle="dropdown">
-          Account
-          &lt;b class="caret"&gt;&lt;/b&gt;
-    &lt;/a&gt;
-    &lt;ul class="dropdown-menu"&gt;
-      ...
-    &lt;/ul&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;
-</pre>
-  <p><a class="btn" href="./javascript.html#dropdowns">Get the javascript &rarr;</a></p>
-  <hr>
-  <h3>Text in the navbar</h3>
-  <p>Wrap strings of text in a <code>&lt;.navbar-text&gt;</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
-
 </section>
 
 
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 149d81644..3f4ad2d08 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -819,105 +819,213 @@
   <div class="page-header">
     <h1>{{_i}}Navbar{{/i}}</h1>
   </div>
-  <h2>{{_i}}Static navbar example{{/i}}</h2>
-  <p>{{_i}}An example of a static (not fixed to the top) navbar with project name, navigation, and search form.{{/i}}</p>
-  <div class="navbar">
-    <div class="navbar-inner">
-      <div class="container">
-        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-        </a>
-        <a class="brand" href="#">{{_i}}Title{{/i}}</a>
-        <div class="nav-collapse">
-          <ul class="nav">
-            <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
-            <li><a href="#">{{_i}}Link{{/i}}</a></li>
-            <li><a href="#">{{_i}}Link{{/i}}</a></li>
-            <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
-              <ul class="dropdown-menu">
-                <li><a href="#">{{_i}}Action{{/i}}</a></li>
-                <li><a href="#">{{_i}}Another action{{/i}}</a></li>
-                <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
-                <li class="divider"></li>
-                <li class="nav-header">Nav header</li>
-                <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
-                <li><a href="#">{{_i}}One more separated link{{/i}}</a></li>
-              </ul>
-            </li>
-          </ul>
-          <form class="navbar-search pull-left" action="">
-            <input type="text" class="search-query span2" placeholder="Search">
-          </form>
-          <ul class="nav pull-right">
-            <li><a href="#">{{_i}}Link{{/i}}</a></li>
-            <li class="divider-vertical"></li>
-            <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
-              <ul class="dropdown-menu">
-                <li><a href="#">{{_i}}Action{{/i}}</a></li>
-                <li><a href="#">{{_i}}Another action{{/i}}</a></li>
-                <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
-                <li class="divider"></li>
-                <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
-              </ul>
-            </li>
-          </ul>
-        </div><!-- /.nav-collapse -->
-      </div>
-    </div><!-- /navbar-inner -->
-  </div><!-- /navbar -->
 
 
-  <h3>{{_i}}Navbar scaffolding{{/i}}</h3>
-  <p>{{_i}}The navbar requires only a few divs to structure it well for static or fixed display.{{/i}}</p>
+  <h2>{{_i}}Basic navbar{{/i}}</h2>
+  <p>{{_i}}To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.{{/i}}</p>
+  <div class="bs-docs-example">
+    <div class="navbar">
+      <div class="navbar-inner">
+        <a class="brand" href="#">{{_i}}Title{{/i}}</a>
+        <ul class="nav">
+          <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
+          <li><a href="#">{{_i}}Link{{/i}}</a></li>
+          <li><a href="#">{{_i}}Link{{/i}}</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>{{! /example }}
 <pre class="prettyprint linenums">
 &lt;div class="navbar"&gt;
   &lt;div class="navbar-inner"&gt;
-    &lt;div class="container"&gt;
-      ...
-    &lt;/div&gt;
+    &lt;a class="brand" href="#"&gt;{{_i}}Title{{/i}}&lt;/a&gt;
+    &lt;ul class="nav"&gt;
+      &lt;li class="active"&gt;&lt;a href="#"&gt;{{_i}}Home{{/i}}&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href="#"&gt;{{_i}}Link{{/i}}&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href="#"&gt;{{_i}}Link{{/i}}&lt;/a&gt;&lt;/li&gt;
+    &lt;/ul&gt;
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-  <h3>{{_i}}Fixed navbar{{/i}}</h3>
-  <p>{{_i}}Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.{{/i}}</p>
+
+
+  <hr class="bs-docs-separator">
+
+
+  <h2>{{_i}}Navbar components{{/i}}</h2>
+
+  <h3>{{_i}}Brand{{/i}}</h3>
+  <p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p>
 <pre class="prettyprint linenums">
-&lt;div class="navbar navbar-fixed-top"&gt;
-  ...
-&lt;/div&gt;
+&lt;a class="brand" href="#"&gt;{{_i}}Project name{{/i}}&lt;/a&gt;
 </pre>
+
+  <h3>{{_i}}Nav links{{/i}}</h3>
+  <p>{{_i}}Nav items are simple to add via unordered lists.{{/i}}</p>
 <pre class="prettyprint linenums">
-&lt;div class="navbar navbar-fixed-bottom"&gt;
-  ...
-&lt;/div&gt;
+&lt;ul class="nav"&gt;
+  &lt;li class="active"&gt;
+    &lt;a href="#">{{_i}}Home{{/i}}&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;{{_i}}Link{{/i}}&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;{{_i}}Link{{/i}}&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
 </pre>
-
-  <p>{{_i}}When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
-  <h3>{{_i}}Brand name{{/i}}</h3>
-  <p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p>
+  <p>{{_i}}You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:{{/i}}</p>
 <pre class="prettyprint linenums">
-&lt;a class="brand" href="#"&gt;
-  {{_i}}Project name{{/i}}
-&lt;/a&gt;
+&lt;ul class="nav"&gt;
+  ...
+  &lt;li class="divider-vertical"&gt;&lt;/li&gt;
+  ...
+&lt;/ul&gt;
 </pre>
-  <h3>{{_i}}Forms in navbar{{/i}}</h3>
+
+  <h3>{{_i}}Forms{{/i}}</h3>
   <p>{{_i}}To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;form class="navbar-form pull-left"&gt;
   &lt;input type="text" class="span2"&gt;
 &lt;/form&gt;
 </pre>
+
+  <h3>{{_i}}Search form{{/i}}</h3>
   <p>{{_i}}For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;form class="navbar-search pull-left"&gt;
   &lt;input type="text" class="search-query" placeholder="{{_i}}Search{{/i}}"&gt;
 &lt;/form&gt;
 </pre>
-  <h3>{{_i}}Optional responsive variation{{/i}}</h3>
-  <p>{{_i}}Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p>
+
+  <h3>{{_i}}Component alignment{{/i}}</h3>
+  <p>{{_i}}Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.{{/i}}</p>
+
+  <h3>{{_i}}Using dropdowns{{/i}}</h3>
+  <p>{{_i}}Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">dropdowns javascript plugin</a>.{{/i}}</p>
+<pre class="prettyprint linenums">
+&lt;ul class="nav"&gt;
+  &lt;li class="dropdown"&gt;
+    &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown">
+      {{_i}}Account{{/i}}
+      &lt;b class="caret"&gt;&lt;/b&gt;
+    &lt;/a&gt;
+    &lt;ul class="dropdown-menu"&gt;
+      ...
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+  <p>{{_i}}Visit the <a href="./javascript.html#dropdowns">javascript dropdowns documentation</a> for more markup and information on calling dropdowns.{{/i}}</p>
+
+  <h3>{{_i}}Text{{/i}}</h3>
+  <p>{{_i}}Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.{{/i}}</p>
+
+
+  <hr class="bs-docs-separator">
+
+
+  <h2>{{_i}}Fixed navigation{{/i}}</h2>
+  <p>{{_i}}Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.{{/i}}</p>
+
+  <h3>Fixed to top</h3>
+  <p>{{_i}}Add <code>.navbar-fixed-top</code> and remember to account for the hidden area underneath it by adding at least 40px <code>padding</code> to the <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
+  <div class="bs-docs-example bs-navbar-top-example">
+    <div class="navbar navbar-fixed-top" style="position: absolute;">
+      <div class="navbar-inner">
+        <div class="container" style="width: auto; padding: 0 20px;">
+          <a class="brand" href="#">{{_i}}Title{{/i}}</a>
+          <ul class="nav">
+            <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
+            <li><a href="#">{{_i}}Link{{/i}}</a></li>
+            <li><a href="#">{{_i}}Link{{/i}}</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>{{! /example }}
+<pre class="prettyprint linenums">
+&lt;div class="navbar navbar-fixed-top"&gt;
+  ...
+&lt;/div&gt;
+</pre>
+
+  <h3>Fixed to bottom</h3>
+  <p>{{_i}}Add <code>.navbar-fixed-bottom</code> instead.{{/i}}</p>
+  <div class="bs-docs-example bs-navbar-bottom-example">
+    <div class="navbar navbar-fixed-bottom" style="position: absolute;">
+      <div class="navbar-inner">
+        <div class="container" style="width: auto; padding: 0 20px;">
+          <a class="brand" href="#">{{_i}}Title{{/i}}</a>
+          <ul class="nav">
+            <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
+            <li><a href="#">{{_i}}Link{{/i}}</a></li>
+            <li><a href="#">{{_i}}Link{{/i}}</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>{{! /example }}
+<pre class="prettyprint linenums">
+&lt;div class="navbar navbar-fixed-bottom"&gt;
+  ...
+&lt;/div&gt;
+</pre>
+
+
+  <hr class="bs-docs-separator">
+
+
+  <h2>{{_i}}Responsive navbar{{/i}}</h2>
+  <p>{{_i}}To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p>
+  <div class="bs-docs-example">
+    <div class="navbar">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </a>
+          <a class="brand" href="#">{{_i}}Title{{/i}}</a>
+          <div class="nav-collapse">
+            <ul class="nav">
+              <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
+              <li><a href="#">{{_i}}Link{{/i}}</a></li>
+              <li><a href="#">{{_i}}Link{{/i}}</a></li>
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
+                <ul class="dropdown-menu">
+                  <li><a href="#">{{_i}}Action{{/i}}</a></li>
+                  <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+                  <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+                  <li class="divider"></li>
+                  <li class="nav-header">Nav header</li>
+                  <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+                  <li><a href="#">{{_i}}One more separated link{{/i}}</a></li>
+                </ul>
+              </li>
+            </ul>
+            <form class="navbar-search pull-left" action="">
+              <input type="text" class="search-query span2" placeholder="Search">
+            </form>
+            <ul class="nav pull-right">
+              <li><a href="#">{{_i}}Link{{/i}}</a></li>
+              <li class="divider-vertical"></li>
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
+                <ul class="dropdown-menu">
+                  <li><a href="#">{{_i}}Action{{/i}}</a></li>
+                  <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+                  <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+                  <li class="divider"></li>
+                  <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+                </ul>
+              </li>
+            </ul>
+          </div><!-- /.nav-collapse -->
+        </div>
+      </div><!-- /navbar-inner -->
+    </div><!-- /navbar -->
+  </div>{{! /example }}
 <pre class="prettyprint linenums">
 &lt;div class="navbar"&gt;
   &lt;div class="navbar-inner"&gt;
@@ -946,49 +1054,6 @@
     <strong>{{_i}}Heads up!{{/i}}</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
   </div>
 
-  <h3>{{_i}}Nav links{{/i}}</h3>
-  <p>{{_i}}Nav items are simple to add via unordered lists.{{/i}}</p>
-<pre class="prettyprint linenums">
-&lt;ul class="nav"&gt;
-  &lt;li class="active"&gt;
-    &lt;a href="#">{{_i}}Home{{/i}}&lt;/a&gt;
-  &lt;/li&gt;
-  &lt;li&gt;&lt;a href="#"&gt;{{_i}}Link{{/i}}&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#"&gt;{{_i}}Link{{/i}}&lt;/a&gt;&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
-  <p>{{_i}}You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:{{/i}}</p>
-<pre class="prettyprint linenums">
-&lt;ul class="nav"&gt;
-  ...
-  &lt;li class="divider-vertical"&gt;&lt;/li&gt;
-  ...
-&lt;/ul&gt;
-</pre>
-  <h3>{{_i}}Component alignment{{/i}}</h3>
-  <p>{{_i}}To align a nav, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.{{/i}}</p>
-  <h3>{{_i}}Adding dropdown menus{{/i}}</h3>
-  <p>{{_i}}Adding dropdowns and dropups to the nav is super simple, but does require the use of <a href="./javascript.html#dropdowns">our javascript plugin</a>.{{/i}}</p>
-<pre class="prettyprint linenums">
-&lt;ul class="nav"&gt;
-  &lt;li class="dropdown"&gt;
-    &lt;a href="#"
-          class="dropdown-toggle"
-          data-toggle="dropdown">
-          {{_i}}Account{{/i}}
-          &lt;b class="caret"&gt;&lt;/b&gt;
-    &lt;/a&gt;
-    &lt;ul class="dropdown-menu"&gt;
-      ...
-    &lt;/ul&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;
-</pre>
-  <p><a class="btn" href="./javascript.html#dropdowns">{{_i}}Get the javascript &rarr;{{/i}}</a></p>
-  <hr>
-  <h3>{{_i}}Text in the navbar{{/i}}</h3>
-  <p>{{_i}}Wrap strings of text in a <code>&lt;.navbar-text&gt;</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.{{/i}}</p>
-
 </section>