Twitter Bootstrap: Multiple responsive collapsable navs?

Question

I'm using Twitter Bootstrap. I want to have two (or more) navigations that when viewed on mobile, collapse into a dropdown.

This can easily be done once on a page, but I can't figure out how to have multiple responsive/collapsable navigations.

This code works to create one nav that collapses on mobile:

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">groups</a>

<div class="nav-collapse">
  <ul class="nav">
    <li><a href="#">Nav Link</a></li>
    <li><a href="#">Nav Link</a></li>
    <li><a href="#">Nav Link</a></li>
    <li><a href="#">Nav Link</a></li>
  </ul>
</div>

But how can I make a 2nd nav?

I tried duplicating this code and changing data-target=".nav-collapse" to data-target=".nav-collapse2" but that doesn't work.

Does Twitter Bootstrap offer the ability to have 2 or more responsive navs on a page?

Answer 1

You're on the right track.

.nav-collapse is used internally by bootstrap to actually make the navigation collapse responsively. Instead of using .nav-collapse2 as a data-target, use your own class/id (in addition to using .nav-collapse)

Here's an example:

<a class="btn btn-navbar" data-toggle="collapse" data-target=".col1">groups</a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".col2">groups2</a>

<div class="nav-collapse col1">
    <ul class="nav">
        <li><a href="#">Nav Link</a></li>
        <li><a href="#">Nav Link</a></li>
    </ul>
</div>
<div class="nav-collapse col2">
    <ul class="nav">
        <li><a href="#">Nav Link2</a></li>
        <li><a href="#">Nav Link2</a></li>
   </ul>
</div>

Here's a fiddle.