jquery - Consolidate multiple Bootstrap 3 navbar menus on collapse

Question

We've moving our administrative interface for a large CMS over to Bootstrap (3.x) to provide better support across all devices. It has multiple menus in the desktop interface serving different purposes.

I've been able to collapse a single menu in the xs interface, however I'm having a hard time wrapping my head around how to collapse the others either into the same mobile menu, or into a different menu button in the same navbar, or if there's a solution "C" that I don't even know about.

Is this even possible?

Answer 1

The data-target attribute accepts a CSS selector to apply the collapse to. This CSS selector can also be a class (so do not have to be unique) and can be applied on more than one navbar.

So create more than one navbar, all having their content wrapped inside <div class="collapse navbar-collapse">.

One of these navbars should have a mobile toggle button, with data-target=".navbar-collapse":

<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
</div>

demo: http://www.bootply.com/BaiuoZqIrk

Also see:

• Multiple navbars on the same page with Twitter's Bootstrap 3
• Bootstrap 3 multiple menus collapse into one for mobile