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
  10. Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with extra information? It is extremely helpful for me. 카지노사이트

    ReplyDelete
  11. Its a great pleasure reading your post. Its full of information I am looking for and I love to post a comment that "The content of your post is awesome" Great work 카지노사이트

    ReplyDelete
  12. Good day I am so glad I found your blog, I really found you by mistake, while I was searching on Aol for something else, Anyways I am here now do my homework online and would just like to say thanks a lot for a marvelous post

    ReplyDelete
  13. Keep the balls rolling!! Nice posts you have given for us. 토토

    ReplyDelete
  14. your work was exemplary. The information provided was very helpful and articulate. Keep recording. 카지노사이트

    ReplyDelete
  15. Thanks for sharing such an amazing post with us it is very informative and helpful. 파워볼사이트

    ReplyDelete
  16. Happy New Year Messages To Clients make an edge for you to chase the attention of your clients. In this way, the offers you offer to them get more feasible towards them. They tend to think about your offers and ask your company for constant services. Happy New Year Resolution for Primary School Students 2022

    ReplyDelete
  17. Truly official and a need to-have device in your content material arsenal regardless of you're a blogger, freelance creator or an Dissertation Writing Services educational expert. It has some of the largest searchable databases of books, internet pages and over 1 million journals that makes it pretty hard to pass together with your replica content material.

    ReplyDelete
  18. I'm writing on this topic these days, 메리트카지노, but I have stopped writing because there is no reference material. Then I accidentally found your article. I can refer to a variety of materials, so I think the work I was preparing will work! Thank you for your efforts.


    ReplyDelete

emo-but-icon

SUBSCRIBE


item