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: the links and the search field. Now I need two buttons, one to collapse only the links of the navbar and the other button to collapse only the search field. How can i make this?

Solution

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

Sample markup:

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#search">Toggle search</button>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#links">Toggle links</button> 
        <a class="navbar-brand" href="#">Brand</a>
    </div>
    <ul class="collapse navbar-collapse nav navbar-nav" id="links">
        <!--Links go here-->
    </ul>
    <div class="collapse navbar-collapse" id="search">
        <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>
    </div>
</nav>

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

Comments

[russellb]

Thanks for this solution. I also found that it was necessary to add margin-top:0; and margin-bottom:0; to the .navbar-nav.navbar-collapse styles above, otherwise the default vertical margins cause a slight jump when the .navbar-nav slides shut. Here is an amended fiddle

[alds]

I was looking at a jQuery solution to implement the Search, and didn't realize that you can just replicate Bootstrap's menu button. Come to think of it, this should be part of the Bootstrap docs as collapsible Search is a common responsive pattern too. Thanks for the clever solution!