Using Bootstrap Responsive Framework I have to use two Nav bars in my page. they work fine but in a toggle mode clicking on icon lists both "nav-collapce" items!
I tried to rename the collapse class name for second class but it didn't work. Can you please let me know how I can run both "nav-collapse collapse two times without any conflict?
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Candete</a>
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">All Products</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Product Category</a>
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li><a href="#">Gold</a></li>
<li><a href="#">Copper</a></li>
<li><a href="#">Zinc</a></li>
<li><a href="#">Metals</a></li>
<li><a href="#">Other</a></li>
</ul>
</div>
</div>
</div>
Best Answer
In Twitter Bootstrap,
.nav-collapse
is important class, so don't change it. What is best solution?On line
<div class="nav-collapse collapse">
add some new class, let's call it.menu1
. So new code will be<div class="nav-collapse collapse menu1">
. And thendata-target=".nav-collapse"
change todata-target=".menu1"
.You can do the same thing with second menu and with some new
.menu2
class, or leave it as it is (it will work, because both menus have differentdata-target
).And here is working demo http://jsfiddle.net/xmLDd/