Aciano Technologies Blog

A Place With Numerous Solutions!

Fixed Navbar (Menu bar) with Bootstrap 3 | Post - 2

Today, I’m going to tell you how to fix the Navbar (Menu bar) just like we see on our Facebook. First of all you’ll need to add some bootstrap 3 CSS and script files in your document to run these features.

Below are some of the scripts that you need to add on above the </head> tag OR you can download bootstrap files from their website.

 

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

 

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"> 

 

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

 

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

 

Now you need to create the <nav> tag which is now available in HTML5 and put it under the <body> tag.

The <nav> tag contains two things, first one is ‘class’ and second one is ‘role’.

<nav role="navigation" class="navbar navbar-default navbar-fixed-top">

</nav>

 

The above code contains class in which you can see "navbar-fixed-top" basically this code is used to fix the navbar.

Now let me tell you the complete code.

<nav role="navigation" class="navbar navbar-default navbar-fixed-top">

    <div class="navbar-header">

        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">

            <span class="sr-only">Toggle navigation</span>

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

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

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

        </button>

        <a href="#" class="navbar-brand">Brand</a>

    </div>

    <div id="navbarCollapse" class="collapse navbar-collapse">

        <ul class="nav navbar-nav">

            <li class="active"><a href="#">Home</a></li>

            <li><a href="#">Profile</a></li>

            <li><a href="#">Messages</a></li>

        </ul>

        <ul class="nav navbar-nav navbar-right">

            <li><a href="#">Login</a></li>

        </ul>

    </div>

</nav>

 

Follow the above code, paste it in your <body> tag, run the code and enjoy!

 

Thank You.