Web
Analytics
Bootstrap menu bar example - Tutorial

For Consultation : +91 9887575540

Stay Connected :

Bootstrap Default Menu

In bootstrap , menu can be created using div tag with class “navbar”

<div class=”navbar navbar-inverse navbar-fixed-top”></div>

navbar-inverse: This is used when we do not want default coloring(transparent) , It will create menu with black background.

navbar-fixed-top: This class is used when we want to fix our header , means header position is fixed when user scroll down page

Defining the menu links

As we  know that to create menu we can use ul element of HTML with class nav navbar-nav.

<div class=”navbar navbar-inverse navbar-fixed-top”>

<div class=”navbar-collapse collapse”>

<ul class=”nav navbar-nav”>

<li><a href=”Home”>Home</a></li>

<li><a href=”ContactUs”>Contact Us</a></li>

<li><a href=”About Us”>About Us</a></li>

</ul>

</div>

</div>

Above example will show simple menu .

<div class=”navbar navbar-inverse navbar-fixed-top”>

<div class=”container”>

<div class=”navbar-header”>

<button type=”button” class=”navbar-toggle” data-toggle=”collapse”

data-target=”.navbar-collapse”>

<span class=”icon-bar”></span>

<span class=”icon-bar”></span>

<span class=”icon-bar”></span>

</button>

<!–@Html.ActionLink(“Application name”, “Index”, “Home”,

new { area = “” }, new { @class = “navbar-brand” })–>

</div>

<div class=”navbar-collapse collapse”>

<ul class=”nav navbar-nav”>

<li><a class=”navbar-brand” href=”Home”>Home</a></li>

<li><a href=”ContactUs”>Contact Us</a></li>

<li><a href=”About Us”>About Us</a></li>

</ul>

</div>

</div>

Now I am going to create menu bar with simple collapse features, mean when user change the screen size or view website on small devices menu will display as collapsed bar.Screen Output is shown below.

collapse_navbar

Download navbar example

 

Select your currency