Two Bootstrap nav menus at the same time

Question

I like to know if its possible to have two nav's at the same time.

Here is a JSFiddle with the bootstrap test with only the collapse JavaScript for the navbar. Both menus get expanded at the same time, is there a way to prevent that?

Solution

You can, all you have to do is differentiate the data-target attribute with a unique class or id for your dropdown menus like so:

For your first dropdown

<a class="btn btn-navbar" data-toggle="collapse" data-target="#first">

For your second dropdown:

<a class="btn btn-navbar" data-toggle="collapse" data-target="#second">

Then you can add that unique id to your nav collapse container:

First

<div id="first" class="nav-collapse"> ... </div>

Second

<div id="second" class="nav-collapse"> ... </div>

Demo: http://jsfiddle.net/F2tYu/3/