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...
https://www.programming-free.com/2014/09/responsive-menu-bootstrap-3.html
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
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.
Older - Twitter Bootstrap 2.0
Please leave your comments and queries about this post in the comment sections and stay subscribed. Thanks for reading!!
I'm using this menu
ReplyDeleteI 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
how moronic that copying and pasting the code is impossible because you included the line numbers? Moving on...
ReplyDeleteYou 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.
Deletegood to start with bootstrap menu...thanks..
ReplyDeletegood and thanks
ReplyDeleteYou 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
ReplyDeleteGreat stuff!! Looking forward to visit more. Thank you for sharing the content.Quickbooks Tool Hub
ReplyDeleteThanks for sharing nice post I Need an Essay
ReplyDeleteExcellent 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
ReplyDeleteIt was an nice blog and also very interesting to read it......
hadoop course in chennai
hadoop big data training in chennai
Best Software Training institute in Chennai
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.
ReplyDeleteThanks 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. 카지노사이트
ReplyDeleteIts 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 카지노사이트
ReplyDeleteGood 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
ReplyDeleteKeep the balls rolling!! Nice posts you have given for us. 토토
ReplyDeleteyour work was exemplary. The information provided was very helpful and articulate. Keep recording. 카지노사이트
ReplyDeleteThanks for sharing such an amazing post with us it is very informative and helpful. 파워볼사이트
ReplyDeleteHappy 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
ReplyDeleteTruly 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.
ReplyDeleteI'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.
ReplyDeleteVery nice post, i love your content https://cocservers.net/clash-paradise/
ReplyDeleteBreeze Cool
ReplyDeleteAC Repair
Bezt Windows AC