menu

Bootstrap Navigation Bar

Bootstrap Navigation Bar : Bootstrap Navigation header is the top of header contating the navigation link of the site. You can place the navigation bar anywhere in header, footer or content area as per your need. This navigation menu provides the default responsive navigation means on mobile device they collapse and displays the icon to expand and show the menu items. By default on desktop or regular screen this navigation is horizontal. It becomes vertical on mobile devices.

Bootstrap Navigation Bar

There are following types of navigation available in bootstrap:

Default Navigation

For Adding Default navigation .navbar-default class is used.”

Here is an example of very basic default navigation menu.

Example

Try it »

The above code will produce the following result-

Bootstrap Navigation Bar

Bootstrap Inverted Navigation

Inverted navigation provides you the inverse style than the default style in bootstrap. Class .navbar-inverse is used to create the inverse navigation menu.

Here is very basic and simple example of inverted navigation bar.

Example

Try it »

The Above code will produce the following output-

Bootstrap Navigation Bar

Bootstap Navbar COllapse

You Can create a navbar which will collapse on smaller resolution such as mobile device, tablet devices.

Add the following code to make navigation collapse on mobile devices.

Example

Try it »

It will produce the following output –

Bootstrap navbar collapse example

Bootstrap Navbar fixed : Top

You can create fixed navigation menu placed at top of the page. This navigation is always fixed at the top of the page though you scroll down page.

For top fixed navigation menu add the following css .navbar-fixed-top

Example

Try it »

Bootstrap Navbar fixed : Bottom

You can create fixed navigation menu placed at bottom of the page. This navigation is always fixed at the bottom of the page though you scroll down page.

For top fixed navigation menu add the following css .navbar-fixed-bottom

Example

Try it »

Colored Navigation

If You want to create the colored navigation Add Css to modify the background colored.

Bootstrap Colored Navigation >

Advertisements