CODEWITHSUNDEEP
jquerycsstwitter-bootstrapresponsive-designtwitter-bootstrap-3
oucil
oucil

Reputation: 4594

Consolidate multiple Bootstrap 3 navbar menus on collapse

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?

Upvotes: 4

Views: 9357

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49054

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:

Upvotes: 5

Related Questions