Responsive Navigation Menu using Twitter Bootstrap 3.0

DEMO DOWNLOAD In one of my posts  I had explained how to code a responsive navigation menu that changes its display accordin...




In one of my posts I had explained how to code a responsive navigation menu that changes its display according to device screen size using Twitter Bootstrap. I used Bootstrap version 2.0. In the subsequent version releases of Bootstrap, there are few changes made in the navbar css classes and my previous post on the same topic does not work if you had migrated or working with version 3 plus of Bootstrap.

This tutorial explains how to create responsive navigation menu Twitter Bootstrap 3.2.0

1. Download Bootstrap 3.2.0 from here. Download latest version of jquery from here.

2. Unzip the downloaded files and create a new html file in the same directory. 


I had placed jquery library in js folder.

3. Copy and paste below code in the html file.

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Responsive Navigation Menu using Twitter Bootstrap 3">
    <meta name="author" content="Priyadarshini">
    

    <title>Navbar Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
 
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="container">
      <!-- Static navbar -->
      <div class="navbar navbar-inverse" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          </div>
          <div class="navbar-collapse collapse" style="height: 1px;">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
              <li><a href="#">Features</a></li>
              <li><a href="">Pricing</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<b class="caret"></b></a>
                <ul class="dropdown-menu">
                <li><a href="#">Latest Products</a></li>
                <li><a href="#">Popular Products</a></li>
                </ul>
              </li>          
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Membership<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Personal Membership</a></li>
                  <li><a href="#">Premium Membership</a></li>
                </ul>
              </li>
              <li><a href="#">Offers</a></li>
              <li><a href="#">Gallery</a></li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Contact</a></li>
              <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                </ul>
              </li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </div>
    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script> 

</body></html>


In the previous version, to achieve responsive web design we had to include boostrap.responsive.css file. But now it is all wrapped up in a single css file (bootstrap.min.css).

That is all! Open the html file in a browser and resize it to see how the navigation menu displays for various screen sizes.




Please leave your comments and queries about this post in the comment sections and stay subscribed. Thanks for reading!!

Subscribe to GET LATEST ARTICLES!


Related

Responsive Design 8578378858088139343

Post a Comment

  1. I'm using this menu

    I use sub menu with target iframe and linking to cross domain

    After click the menu not close at all.... how to fix it?

    syabiz[at]gmail.com

    thanks

    ReplyDelete
  2. how moronic that copying and pasting the code is impossible because you included the line numbers? Moving on...

    ReplyDelete
    Replies
    1. You call it moronic??!! Funny ... You can see few icons on the top right corner of the code, one of which opens the code in a clean window for you to copy it easily.

      Delete
  3. good to start with bootstrap menu...thanks..

    ReplyDelete
  4. You shared very valuable information. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work. Quickbooks File Restore

    ReplyDelete
  5. Great stuff!! Looking forward to visit more. Thank you for sharing the content.Quickbooks Tool Hub

    ReplyDelete
  6. Excellent Blog! I would like to thank for the efforts you have made in writing this post. I am hoping the same best work from you in the future as well. I wanted to thank you for this websites! Thanks for sharing. We have gained our specialization study helper after spending most of our time making ourselves perfect. We provide 100% plagiarism-freeassignment writing service. Our assignment helps developers are experts in every subject because of which they provide reliable services proofreading services all over the world.

    ReplyDelete
  7. When they take place and also as they occur, football and also sporting activities arenas in the UK currently make use of iptv to bring video games to bigger target markets. IPTV is simply a really broad principle with numerous lots of applications.

    ReplyDelete
  8. You know your projects stand out of the herd. There is something special about them. It seems to me all of them are really brilliant! 야동비즈

    ReplyDelete

  9. Great Article it its really informative and innovative keep us posted with new updates. its was really valuable. thanks a lot. 한국야동

    ReplyDelete

emo-but-icon

SUBSCRIBE


item