How to build Top Fixed Navigation menu using bootstrap

Typical navigation systems make use of CSS and JQuery library or other JS libraries, but this can be done easily with a framework like bootstrap. In this demonstration I will show you how to build a Top, fixed and responsive navigation menu with a dropdown menu.

VIEW DEMO DOWNLOAD SOURCE

1.Navigation options

Navigation starts with nav element with a class="navbar", to tell bootstrap that this is a top navigation bar within the page header.
Now there are classes used for some options such as:

Default navigation has somewhat white type of background colour with the class: class="navbar navbar-default".
Black background make use of class: .inverse,instead of .default.
FIXED, that means even when the page is scrolled the navigation is visible

2.Navigation menu full screen width

Inside the nav tags there is a div element which is a parent to the content inside the navigation system. This div has class name .container-fluid, which causes the navigation bar to be full screen wide. Inside this div there are THREE elements that I will talk about, starting with navigation header.

3.Navigation Header (Logo Design)

Inside a container div there is a navigation header which is a div with class="navbar-header" and an anchor tag which has class="navbar-brand” to style the logo of the website.

4.Unorderd List with anchor tags.

The second content of the navigation inside the container div in the nav is unordered menu list of anchor tags. This has class="nav navbar-nav" which tells bootstrap that this ul is of the navigation and thus will be styled accordingly. A class of .active in the first menu item is used to style the active anchor tag in the list which is usually home by default.

5.Dropdown Menu

Inside one of the list menu items there is an unordered menu listed with anchor tags.