Bootstrap 3 multiple menus collapse into one for mobile

Question

I have been fighting with menus for a while now. What I want is both a top menu and a side menu. And in order to be useful on mobile devices, both menus need to collapse into something accessible on a phone. Is this actually possible? Or do I have to code different solutions for the different screen sizes?

Thanks

No. I'm working with a template that's very complex. Too complex. I would prefer an easier solution. So I'm going back to first principles... — PrecisionPete, Jan 18 '14 at 21:43

score 10 · Answer 1 · edited May 23 '17 at 12:17

html

<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <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>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
          <li class="divider"></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>
<div class="container">
    <div class="row">
        <section class="col-sm-9">content</section>
        <aside id="sidebar" class="col-sm-3 hidden-xs">

        <ul class="nav nav-pills nav-stacked">
          <li><a href="#">Home</a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="#">Messages</a></li>
        </ul>


        </aside>
    </div>
</div>

javascript

$('#bs-example-navbar-collapse-1').on('show.bs.collapse', function () {
  $('#bs-example-navbar-collapse-1').append($('#sidebar').html());
  $('#bs-example-navbar-collapse-1 ul').last().removeClass('nav-pills nav-stacked').addClass('navbar navbar-nav');
});
$('#bs-example-navbar-collapse-1').on('hidden.bs.collapse', function () {
  $('#bs-example-navbar-collapse-1 ul:last-child').remove();
});
$(window).on('resize', function () {
  if (window.innerWidth > 768) {$('#bs-example-navbar-collapse-1').collapse('hide');}
});

Example: http://bootply.com/106921

The (navbar) collapse triggers some events: hidden, hide, show and shown. (see: http://getbootstrap.com/javascript/#collapse) use this events to append the content of your side menu to the navbar. Remove it again on hidden: remove last append element jquery

Hide your side menu on small devices with the Responsive utilities (http://getbootstrap.com/css/#responsive-utilities).

The last "problem" collapse hide isn't triggerd on window resize will be solved here: https://github.com/twbs/bootstrap/issues/11653

This should be the accepted answer. I asked the same thing here: http://stackoverflow.com/questions/33223030/combining-multiple-bootstrap-menus-into-one-for-mobile/33223312#33223312 and used your answer to solve my solution. — o_O, Oct 19 '15 at 20:27

score 0 · Answer 2 · edited Jan 18 '18 at 19:12

I know this is an older post but still the best answer to a similar question I had present day, I had to modify one small thing though to make it work properly for me. Everything worked as intended except the line

$('#bs-example-navbar-collapse-1 ul:last-child').remove();

This would for some weird reason remove literally the last child of every ul in the menu so to correct it just added an id to the aside ul and used that selector to remove the menu which worked out a bit better especially if combining more than one menu. Thank you very much for the solution though! Bass Jobsen! Only going to post the modified lines since Bass already has the answer posted.

in the html:

<ul class='nav nav-pills nav-pills-stacked'id='sideMenu1'>

and in the javsacript:

$('#bs-example-navbar-collapse-1 #sideMenu1').remove();

Bootstrap 3 multiple menus collapse into one for mobile

2 Answers2

Linked