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. Thanks for sharing this marvelous post. I m very pleased to read this article.
    송송넷

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

    ReplyDelete
  15. I should say only that its awesome! The blog is informational and always produce amazing things 토토사이트

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

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

    ReplyDelete
  18. It was really good work. I really like your thoughts. I personally appreciates for your work. your article is very impressive and helpful for us. .. Thanks 바카라사이트

    ReplyDelete
  19. Thanks for posting this info. I just want to let you know that I just check out your site and I find it very interesting and informative. I can't wait to read lots of your posts.
    국내경마

    magosucowep

    ReplyDelete
  20. 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
  21. 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
  22. I’m very pleased to discover this site. I want to to thank you for ones time for this particularly wonderful read!! I definitely savored every part of it and i also have you saved as a favorite to see new information on your blog. 먹튀사이트

    ReplyDelete
  23. 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
  24. You made some good points there. I did a Google search about the topic and found most people will believe your blog. 메이저사이트

    ReplyDelete
  25. Your post is very interesting to me. Reading was so much fun. I think the reason reading is fun is because it is a post related to that I am interested in. Articles related to 온카지노 you are the best. I would like you to write a similar post about !

    ReplyDelete
  26. I'm so happy to finally find a post with what I want. 메이저토토사이트 You have inspired me a lot. If you are satisfied, please visit my website and leave your feedback.

    ReplyDelete
  27. "In the wake of researching a piece of the blog articles on your site page, I truly like your procedure 토토사이트
    of adding to a blog. I saved it to my bookmark site list and will return soon.
    In case it's not all that aggregate bother, visit my site also and notice to me your point of view.
    "

    ReplyDelete
  28. Please let me know if you’re looking for a article writer for your site. You have some really great posts and I feel I would be a good asset. If you ever want to take some of the load off, I’d absolutely love to write some material for your blog in exchange for a link back to mine. Please send me an email if interested. Thank you 먹튀사이트 I couldn't think of this, but it's amazing! I wrote several posts similar to this one, but please come and see!!

    ReplyDelete
  29. The King Casino | Slot Games - Herzaman India
    Pragmatic Play's new online slots bsjeon are available https://sol.edu.kg/ on the herzamanindir.com/ online kadangpintar casino's website and can be played on 토토 your phone from anywhere.

    ReplyDelete

emo-but-icon

SUBSCRIBE


item