CODEWITHSUNDEEP
twitter-bootstrapnavigationresponsive-design
bcWeb
bcWeb

Reputation: 961

Twitter Bootstrap: Multiple responsive collapsable navs?

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?

Upvotes: 4

Views: 6988

Answers (2)

Patabugen
Patabugen

Reputation: 317

I started out the same as @gurch101 said, then used this to hide the other menu.

// Only show one navigation at a time
jQuery(function($){
  $('.col1').on('show.bs.collapse', function(){
    var otherNav = $('.col2');
    if (otherNav.is(':visible')) {
      otherNav.collapse('hide');
    }
  });
  $('.col2').on('show.bs.collapse', function(){
    var otherNav = $('.col1');
    if (otherNav.is(':visible')) {
      otherNav.collapse('hide');
    }
  });
});

Upvotes: 0

gurch101
gurch101

Reputation: 2064

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.

Upvotes: 10

Related Questions