Two Responsive Nav bar in Bootsrap Page Conflicts

Question

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? ```

Accepted Answer

In Twitter Bootstrap, `.nav-collapse` is important class, so don't change it. What is best solution? On line `

` add some new class, let's call it `.menu1`. So new code will be `

`. And then `data-target=".nav-collapse"` change to `data-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 different `data-target`). And here is working demo http://jsfiddle.net/xmLDd/

Two Responsive Nav bar in Bootsrap Page Conflicts

Solution

Problem