Navbar

The navbar is a simple wrapper for positioning branding (logo), navigation, and other elements into a concise navigation header. It's easily extensible, and with the help of the collapse plugin, it can easily integrate offscreen content.

In the following example:

• I have used, and you should use HTML element nav to define the navigation bar instead of HTML element div even though they are interchangable and do nothing different. Pay attention that due to this element, all other navigation bar related classes in Bootstrap are prefixed with navbar.


• I have used Bootstrap class bg-warning (which makes the background color of the navigation bar orange), but you could alternatively use any background color you want as defined in your own stylesheet, or use any other Bootstrap delivered classes such as bg-primary (which makes the background color of the navigation bar blue), bg-secondary which makes the background color of the navigation bar white, bg-success (which makes the background color of the navigation bar green), bg-info (which makes the background color of the navigation bar light blue), bg-danger (which makes the background color of the navigation bar red), bg-inverse (which makes the background color close to shade of black), etc..
• I have used Bootstrap class navbar-light. This class makes the background lighter in comparison to the text color. Or more accurately it makes the text in the navbar a darker shade of the background color when not active, and black when active. In contrast I could have used Bootstrap class navbar-dark which would have made the background darker in comparison to the text color. Or more accurately, it would make the text in the navbar a lighter shade of the background color when not active, and white when active... which doesn't make sense for me in my example as my background color is already white :)


• Inside the nav HTML element I have used HTML element anchor (<a>) with Bootstrap class navbar-brand to define the branding of the site, meaning the logo, etc.


• Also inside the nav HTML element I used an unordered list (<ul></ul>) to define the actual menu and (<li></li>) to define my menu items.


• In the unorder list HTML element (<ul></ul>) you must use Bootrtap classes nav and navbar-nav so that the navigation bar can be rendered properly.


• In the list item HTML element (<li></li>) you can use two Bootrtap classes so that the navigation menu items can be rendered properly:
  • The first is navbar-item. It aligns the next navigation item underneath (next row). This is used sparingly.
  • The second is nav-item. It aligns the next navigation item to its right. This is commonly used in navigation bars.
  
  You can also use Bootrtap class active to denote an active menu. Within the HTML list items (<li></li>) use HTML anchors (<a>) to define the menu item names and link them to webpages or additional submenus.


• A menu item can also be defined as collapsable and link to offscreen content. I have done that in the second menu item from the right ( ).


• Although it's not required, it is possible to define the navigation bar (HTML element <nav></nav>) inside a div container (<div class = "container"></div>) to center in on a page or add one within to only center the contents of a fixed or static top navbar. Alternatively you can also add the class container to the HTML element <nav></nav> (as I have done in this example page).


• By default a navigation bar is statically placed and has rounded corners. It is possible to change the placement of the navigation bar by adding classes to the HTML element <nav></nav>:
  • Bootstrap class navbar-full keeps the navigation bar as static but changes the corners from round to rectangle.
  • Bootstrap class navbar-fixed-top fixes the navigation bar to the top of the page and allows the body of the page to scroll underneath it. NOTE: Don't forget to add padding to the body of the page as this action is equivalent to a fixed position.
  • Bootstrap class navbar-fixed-bottom fixes the navigation bar to the bottom of the page and allows the body of the page to scroll underneath it.