<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>
<p>When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <code><body></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>
<preclass="prettyprint linenums">
<a class="brand" href="#">
Project name
</a>
<ul class="nav">
...
<li class="divider-vertical"></li>
...
</ul>
</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>
<preclass="prettyprint linenums">
<form class="navbar-form pull-left">
<input type="text" class="span2">
</form>
</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>
<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 <ahref="./javascript.html#dropdowns">dropdowns javascript plugin</a>.</p>
<p>Visit the <ahref="./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><p></code> tag for proper leading and color.</p>
<hrclass="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><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
<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>
<strong>Heads up!</strong> The responsive navbar requires the <ahref="./javascript.html#collapse">collapse plugin</a> and <ahref="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
</div>
<h3>Nav links</h3>
<p>Nav items are simple to add via unordered lists.</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>
<preclass="prettyprint linenums">
<ul class="nav">
...
<li class="divider-vertical"></li>
...
</ul>
</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 <ahref="./javascript.html#dropdowns">our javascript plugin</a>.</p>
<preclass="prettyprint linenums">
<ul class="nav">
<li class="dropdown">
<a href="#"
class="dropdown-toggle"
data-toggle="dropdown">
Account
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
</ul>
</pre>
<p><aclass="btn"href="./javascript.html#dropdowns">Get the javascript →</a></p>
<hr>
<h3>Text in the navbar</h3>
<p>Wrap strings of text in a <code><.navbar-text></code>, usually on a <code><p></code> tag for proper leading and color.</p>
<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>
<p>{{_i}}When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <code><body></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>
<preclass="prettyprint linenums">
<a class="brand" href="#">
{{_i}}Project name{{/i}}
</a>
<ul class="nav">
...
<li class="divider-vertical"></li>
...
</ul>
</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>
<preclass="prettyprint linenums">
<form class="navbar-form pull-left">
<input type="text" class="span2">
</form>
</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>
<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 <ahref="./javascript.html#dropdowns">dropdowns javascript plugin</a>.{{/i}}</p>
<p>{{_i}}Visit the <ahref="./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><p></code> tag for proper leading and color.{{/i}}</p>
<hrclass="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><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
<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>
<strong>{{_i}}Heads up!{{/i}}</strong> The responsive navbar requires the <ahref="./javascript.html#collapse">collapse plugin</a> and <ahref="./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>
<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>
<preclass="prettyprint linenums">
<ul class="nav">
...
<li class="divider-vertical"></li>
...
</ul>
</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 <ahref="./javascript.html#dropdowns">our javascript plugin</a>.{{/i}}</p>
<preclass="prettyprint linenums">
<ul class="nav">
<li class="dropdown">
<a href="#"
class="dropdown-toggle"
data-toggle="dropdown">
{{_i}}Account{{/i}}
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
</ul>
</pre>
<p><aclass="btn"href="./javascript.html#dropdowns">{{_i}}Get the javascript →{{/i}}</a></p>
<hr>
<h3>{{_i}}Text in the navbar{{/i}}</h3>
<p>{{_i}}Wrap strings of text in a <code><.navbar-text></code>, usually on a <code><p></code> tag for proper leading and color.{{/i}}</p>
