4

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?

oucil
  • 4,211
  • 2
  • 37
  • 53
  • I’ve also been looking for a ‘good’ way of doing this. What I have done in the past is created 2 menus for desktop and then a further mobile menu visible on small devices (which is a completely different menu but a merger of both) but I know this is not the most efficient way to do things though. – Stuart Jul 22 '14 at 10:40

1 Answers1

5

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:

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224