Multiple Collapse buttons in navbar with Bootstrap 3.0

Question

I\'m using Bootstrap 3.0 to show a navbar with some links and a search field. When i go to \"mobile version\" i have a button that collapses the navbar and show all the content:

Answer 1

Separate the links and the search form into two navbar-collapse elements and have each button target the corresponding one:

Sample markup:

    

        Toggle search
        Toggle links 
        Brand
    
    

        
    
    

        

            

                
            
            Submit
        
    

You would then just need to fix some conflicting styles between .navbar-nav and .navbar-collapse by adding this to your CSS:

@media (max-width:767px) {
    .navbar-nav.navbar-collapse {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

Here's a demo fiddle