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 int

Answer 1

html

  
  

    
      Toggle navigation
      
      
      
    
    Brand
  

  
  

    

      
Link
      
Link
      

        Dropdown 
        

          
Action
          
Another action
          
Something else here
          

          
Separated link
          

          
One more separated link
        
      
    
    

      

        
      
      Submit
    
    

      
Link
      

        Dropdown 
        

          
Action
          
Another action
          
Something else here
          

          
Separated link
        
      
    
  



    

        
content
        


        

          
Home
          
Profile
          
Messages
        


        
    

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