Bootstrap 3 Navbars
Add a fully-functional, responsive navbar to your website with minimal code.
Bootstrap navbars allow you to create complex navbars that collapse in smaller viewports and become horizontal in larger viewports.
Example
If you're viewing this on a large screen, the following navbar should appear expanded and horizontal. Otherwise it will be collapsed. In this example, the first link is highlighted (using class="active"
) indicating that it's the current page or section.
This navbar is achieved using the following markup:
Navbars with Dropdowns
You can add dropdown menus to your navbar. Just add the dropdown code to a <li>
element with the .dropdown
class applied.
Navbar with Form Controls
You can include form controls by using .navbar-form
on the <form>
element. This Bootstrap class adjusts the vertical alignment and collapses the form in smaller viewports.
Forms within navbars also require one of the alignment classes to align the form controls within the navbar (see alignment below).
Alignment
You can use .navbar-left
or .navbar-right
to align components within the navbar.
Here, we align the search form to the left, and Link 4 to the right.
Buttons
For standalone buttons (i.e. those not nested inside a <form>
element), add Bootstrap's .navbar-btn
to the <button>
tag.
Text
Runs of text (typically inside a <p>
element) should have Bootstrap's .navbar-text
class applied. This ensures that the correct leading and color is applied to the text.
Non-Nav Links
Non-nav links (i.e. links that are located within text and not within the navbar component) should have Bootstrap's .navbar-link
class applied. This ensures that the correct color is applied to the link.
Inverted Navbar
Bootstrap provides the .navbar-inverse
class to invert the colors of the navbar. Simply replace .navbar-default
with .navbar-inverse
and it's done.
As with any Bootstrap component, you can modify the colors and other styles as you need.
Fixed Navbars
You can fix a navbar to the top or bottom of the viewport by using either .navbar-fixed-top
or .navbar-fixed-bottom
.
Also, be sure to have a .container
or .container-fluid
so that the navbar is centered and padded appropriately.
Fixed Top
Fixed Bottom
Padding Required
When using fixed navbars, you will usually need to add padding to compensate for the height of the navbar. By default, the navbar is 50px high and this will overlay (hide) your content.
To fix this on "fixed top" navbars, it's suggested that you add:
For "fixed bottom" navbars, add:
You can adjust these values as required.
Static Top
You can use .navbar-static-top
to make the navbar behave the opposite to the fixed one (i.e. it scrolls with the page).