Bootstrap Navbar Basics

In the last two articles we saw how we can create simple menus via bootstrap pills and tabs. However, most of the advanced websites now a days contain full-fledged navigation bars. A navigation bar is basically a header that contains navigation menu items. Users can browse different sections of the website via navigation bars. To create navigation bar follow these steps:

Create a nav element with class “navbar navbar-default”
Inside the nav element, create a div with class “container-fluid”
In that div, create a div with class “navbar-header”.
Inside the div created in last step, create a link with class “navbar-brand”
After the anchor tag, create an un-ordered list with classes “nav navbar-nav”. The elements you want in the navigation bar should be added inside the “li” tags.

Take a look at the following example to see bootstrap navbar in action.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
         <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">

                    <a class="navbar-brand" href="#">Knowledge Hills</a>
                    <ul class="nav navbar-nav">
                        <li><a href="#">Home</a></li>
                        <li class="active"><a href="#">About</a></li>
                        <li><a href="#">Our Team</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Services</a></li>
                    </ul>
                </div>

             </div>

         </nav>
            
    </body>

</html>

Download the code Try the code

if you look at the above webpage in browser, you should see a navigation bar with white background menu items in dark grey color. You should also see a brand name i.e. “Knowledge Hills” at the top left. All of this styling comes with bootstrap navigation by default.

Inverted Bootstrap Navbar

You can also create inverted navigation bars to suit the color scheme of your website. An inverted navigation bar has black background and with white text. To create inverted navbars, simply add “navbar-inverse” class instead of navbar-default to the opening “nav” tag. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
         <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">

                    <a class="navbar-brand" href="#">Knowledge Hills</a>
                    <ul class="nav navbar-nav">
                        <li><a href="#">Home</a></li>
                        <li class="active"><a href="#">About</a></li>
                        <li><a href="#">Our Team</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Services</a></li>
                    </ul>
                </div>

             </div>

         </nav>
            
    </body>

</html>

Download the code Try the code

Now if you open the above page, you should see a navigation bar with black background and white text.

Navigation Bar Fixed at the top

You can also create a sticky navigation bar which remains fixed at the top no matter how much do you scroll down the screen. To create sticky navigation bar, simply add class “navbar-fixed-top” class to any bootstrap navbar. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

     <style>
         .div1{
             height: 900px;
             width: 100%;
             background-color: darksalmon;
         }
         .div2{
             height: 900px;
             width: 100%;
             background-color: darkturquoise;
         }
        
    </style>
        
    </head>

    <body> 
         <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">

                    <a class="navbar-brand" href="#">Knowledge Hills</a>
                    <ul class="nav navbar-nav">
                        <li><a href="#">Home</a></li>
                        <li class="active"><a href="#">About</a></li>
                        <li><a href="#">Our Team</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Services</a></li>
                    </ul>
                </div>

             </div>

         </nav>
        
        <div class="div1">
        
        </div>
        
        <div class="div2">
        
        </div>
            
    </body>

</html>

Download the code Try the code

Now if you open the above page in browser and scroll down the screen, you will see that the navigation bar remains fixed at the top of the screen.

<<< Bootstrap PillsBootstrap Navbar Advanced >>>