Menu
I had no problem with the responsive navbar in the last version of Bootstrap, but I cannot get version 3 to work. The toggle button appears properly and everything disappears but the brand, but the button does not respond to clicks. (http://getbootstrap.com/components/#navbar-responsive) Any help would be greatly appreciated! Here is the code so far:
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>Hello World</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
<section>
<div class="navbar navbar-fixed-top">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href= "#" class="navbar-brand">Brand Name</a>
<div class="nav-collapse navbar-responsive-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li class="active "><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</div>
</section>
336
Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin. Navbars are hidden by default when printing. Force them to be printed by adding .
For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don't add any .navbar-expand class.
The navbar-collapse refers to the menu that is in the mobile view with the navbar (contains links, and toggle-friendly content). They are in the bootstrap CSS (see here). See this for a full rundown of how the navbar and collapse work together. Follow this answer to receive notifications.
I believe the code below will produce the effect you're looking for. Specifically, there is no "navbar-responsive-collapse" class in BS3 (see the "bootstrap.css" file). Beginning with release 3 Twitter Bootstrap is responsive by default, so many of the code flags for responsiveness are now baked into the framework and no longer need to be called explicitly.
Here's a BS3 version of the right-aligned collapsible menu:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href= "#" class="navbar-brand">Brand Name</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active "><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</div>
Change this:
.navbar-responsive-collapse
to this:
.navbar-collapse
Original poster solved his own question. Posting a more concise version here as this helped me. PhilNicholas' version did not work.
33
Bootstrap 3 requires jquery.
--> Best practice to put your scripts at the end too.
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With