Bootstrap Navbar Advanced

The previous article sheds light upon the basics of bootstrap navbar. It explains how to create default navigation bar, inverted navigation bar and fixed navigation. This article is continuation of the previous article. It explains process of creating navigation bar with drop down menu, right-aligned navigation bar and collapsible navigation bar. If you haven’t read the last article, please first read that to grasp basic understanding of navigation bars and then come back here to study advanced bootstrap.

Bootstrap Navbar with Drop Down

As was the case with tabs and pills, you can also create drop down menus with bootsrap navigation bars. To create a navigation bar, add a class “dropdown” to the parent list item. Next, add “dropdown-toggle” class to the link or button inside the list. Also, add “data-toggle” attribute with value “dropdown” to the link. Finally add class “dropdown-menu” to the list which you want to show or hide by clicking the link. 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-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 ><a href="#">About</a></li>
                        <li><a href="#">Our Team</a></li>
                       <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Services
                        <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Service 1</a></li>
                          <li><a href="#">Service 2</a></li>
                          <li><a href="#">Service 3</a></li> 
                        </ul>
                      </li>
                        <li><a href="#">Portfolio</a></li>
                        
                    </ul>
                </div>

             </div>

         </nav>
            
    </body>

</html>

Download the code Try the code

Now if you open the above web page in a browser, you should see that services tab has an inverted triangle. If you click it, you will see a drop down menu appear.

Right Aligned Navigation

By default, navigation bars are aligned left. However, you can also create right aligned navigation bars. Simply add “navbar-right” class to the un-ordered list which contains menu items. Take a look at the following example to see right-aligned navigation bars.

<!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>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <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>
     </nav>
            
    </body>

</html>

Download the code Try the code

Now if you run the above code in browser, you should see all the items in the drop down navigation bar are aligned to the right of the screen.

Collapsible Navigation Bar

If you shrink the size of your navigation bar, you will see that it takes quite a bit of screen space, since each menu item is displayed vertically stacked upon each other. One possible solution of this problem is to use navigation bars that contains some button and when this button is clicked, navigation menu is displayed. Take a look at the following example to see how we can achieve this functionality.

<!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">
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menubar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span> 
              </button>
              <a class="navbar-brand" href="#">knowledge Hills</a>
            </div>
            <div class="collapse navbar-collapse" id="menubar">
            <ul class="nav navbar-nav navbar-right">
                <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

<<< Bootstrap Navbar BasicsBootstrap Forms >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .