<p>Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.</p>
<p>Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:</p>
<oltype="a">
<li>Reduce the amount or width of navbar items.</li>
<li>Hide certain navbar items at certain screen sizes using <ahref="../css/#responsive-utilities">responsive utility classes</a>.</li>
<li>Change the point at which your navbar switches between collapsed and horizontal mode. Customize the <code>@grid-float-breakpoint</code> variable or add your own media query.</li>
</ol>
</div>
<divclass="bs-callout bs-callout-danger">
<h4>Requires JavaScript</h4>
<p>If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the <code>.navbar-collapse</code>.</p>
<h4>Changing the collapsed mobile navbar breakpoint</h4>
<p>The navbar collapses into its vertical mobile view when the viewport is narrower than <code>@grid-float-breakpoint</code>, and expands into its horizontal non-mobile view when the viewport is at least <code>@grid-float-breakpoint</code> in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is <code>768px</code> (the smallest "small" or "tablet" screen).</p>
<p>The responsive navbar requires the <ahref="../javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
</div>
<divclass="bs-callout bs-callout-warning">
<h4>Make navbars accessible</h4>
<p>Be sure to add a <code>role="navigation"</code> to every navbar to help with accessibility.</p>
</div>
<h2id="navbar-forms">Forms</h2>
<p>Place form content within <code>.navbar-form</code> for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.</p>
<p>As a heads up, <code>.navbar-form</code> shares much of its code with <code>.form-inline</code> via mixin. <strongclass="text-danger">Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.</strong></p>
<p>There are some caveats regarding using form controls within fixed elements on mobile devices. <ahref="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
</div>
<divclass="bs-callout bs-callout-warning">
<h4>Always add labels</h4>
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline navbar forms, you can hide the labels using the <code>.sr-only</code> class.</p>
</div>
<h2id="navbar-buttons">Buttons</h2>
<p>Add the <code>.navbar-btn</code> class to <code><button></code> elements not residing in a <code><form></code> to vertically center them in the navbar.</p>
<p>Like the standard <ahref="../css/#buttons">button classes</a>, <code>.navbar-btn</code> can be used on <code><a></code> and <code><input></code> elements. However, neither <code>.navbar-btn</code> nor the standard button classes should be used on <code><a></code> elements within <code>.navbar-nav</code>.</p>
</div>
<h2id="navbar-text">Text</h2>
<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>
<p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>
<p>Align nav links, forms, buttons, or text, using the <code>.navbar-left</code> or <code>.navbar-right</code> utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <code><ul></code> with the respective utility class applied.</p>
<p>These classes are mixin-ed versions of <code>.pull-left</code> and <code>.pull-right</code>, but they're scoped to media queries for easier handling of navbar components across device sizes.</p>
<divclass="bs-callout bs-callout-warning">
<h4>Right aligning multiple components</h4>
<p>Navbars currently have a limitation with multiple <code>.navbar-right</code> classes. To properly space content, we use negative margin on the last <code>.navbar-right</code> element. When there are multiple elements using that class, these margins don't work as intended.</p>
<p>We'll revisit this when we can rewrite that component in v4.</p>
</div>
<h2id="navbar-fixed-top">Fixed to top</h2>
<p>Add <code>.navbar-fixed-top</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
<p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the top of the <code><body></code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
{% highlight scss %}
body { padding-top: 70px; }
{% endhighlight %}
<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
</div>
<h2id="navbar-fixed-bottom">Fixed to bottom</h2>
<p>Add <code>.navbar-fixed-bottom</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
<p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the bottom of the <code><body></code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
{% highlight scss %}
body { padding-bottom: 70px; }
{% endhighlight %}
<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
</div>
<h2id="navbar-static-top">Static top</h2>
<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
<p>Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
