Creating a navigation is extremely important for any website. How you define and use your navigation will often define how well your site will perform.
The navbar is the set of classes that Bootstrap uses to help you work on defining, building, and displaying your site navigation. It is also responsive, and if the browser your users are using has a small enough resolution, it will shrink it down, so the menu is hidden until you click on a button to display the menu.
Because of this, ability, the navbar does require that you have/use JavaScript within your website. You will also need the collapse plugin to be included in your Bootstrap project.
A basic navbar will look something like what is below:
Buttons in the Navbar
Want to include a button, that is not in a form. You will need to add the class navbar-btn to the button then. This will help with the visual layout. This means it will look something like:
Regular Text and (Non Navbar) Links
You can add plain text by using the class navbar-text. Likewise you can use a link that is not a navbar style link by adding the class navbar-link. Generally, because this text is pulled out of the navbar, you will want to use navbar-right or navbar-left with the text so that it moves the text to one end or the other of the navbar.
A common reason for this is to show someone being logged in, as in this example below:
Fixing the Position of the Navbar
You can add the class navbar-fixed-top to fix the position of the navbar to the top of the screen. Likewise adding class navbar-fixed-bottom will fix the navbar to the bottom.
If you do this, you will want to add the appropriate padding to the body tag, to allow space for your navbar, so it doesn’t cover your content. It is suggested to add 70px of padding to the top or bottom of the body tag. See below:
body { padding-top: 70px; } /* padding if the navbar is fixed at the top */
body { padding-bottom: 70px; } /* padding if the navbar is fixed at the bottom */
Inverting the Colors
You can invert the colors of your navbar by adding the class navbar-inverse to your nav element.
Other Nav Elements
Additionally, Bootstrap gives us other nav elements that we can use to work with our navigation. These can be used instead of the navbar system, or for interior navigation, depending upon your choices. Nav can also be nice, because it generally doesn’t require JavaScript – even though all of that is hidden from you.
All of these use the nav class and one or more additional classes added to an unordered list.
For example, let’s say you want to have tabs:
Or instead of tabs, you want to use “pills”:
Notice the only thing that changed was that instead of using class nav-tabs, you used nav-.pills
Now one advantage of pills is that they are stackable, meaning they can be vertically positioned off to the side, instead of horizontally. This is by adding the class nav-stacked.
Justifying the Nav
Likewise, you can add nav-justified to the nav element, and it will space all of the elements out, so the completed nav section takes up 100% of the width of your containing element.
Dropdowns in the Nav
Dropdowns do require JavaScript however. But, it is a matter of just adding some simple classes to some elements to get them to work. Here is an example:
Adding Navigation in Bootstrap was originally found on Access 2 Learn
