makes nav-pills collapsable just like nav-bar in bootstrap

html, responsive-design, twitter-bootstrap, twitter-bootstrap-3

Solution

First, you need to include HTML for the menu button once your menu collapses.

<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>
</div>

Then, you need to wrap your `nav-pills` in a div containing Bootstrap's collapse class.

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav nav-pills head-menu">
        <input type="hidden" id="selected_menu_item" value="=$selectedMenuId; ?>" />                               
        <li><a href="#" id="welcome">Welcome text ...</a></li>
        <li><a href="#" id="kitchen">Kitchen</a></li>
        <li><a href="#" id="programma" > Programma</a></li>
        <li><a href="#" id="foodart" >foodart text</a></li>
    </ul>
</div>

You can then wrap all of this in a fluid-container and Bootstrap's `navbar navbar-default` with `role=navigation`.

Additionally, you could add a bit of jQuery to handle "stacking" your menu when it is collapsed instead of remaining horizontal. To do this, Bootstrap's events for show/hide collapse will do the trick: `show.bs.collapse` and `hide.bs.collapse`.

//Stack menu when collapsed
$('#bs-example-navbar-collapse-1').on('show.bs.collapse', function() {
    $('.nav-pills').addClass('nav-stacked');
});

//Unstack menu when not collapsed
$('#bs-example-navbar-collapse-1').on('hide.bs.collapse', function() {
    $('.nav-pills').removeClass('nav-stacked');
});

Working Demo Here

Problem

we are developing an application and we are using twiiter bootstrap 3 we have created a navigation bar with nav-pills ``` <ul class="nav nav-pills head-menu"> <input type="hidden" id="selected_menu_item" value="=$selectedMenuId; ?>" /> <li> <a href="#" id="welcome"> Welcome text ... </a> </li> <li><a href="#" id="kitchen">Kitchen</a></li> <li><a href="#" id="programma" > Programma</a></li> <li><a href="#" id="foodart" >foodart text</a></li> </ul> ``` can anyone with bootstrap experience help us, if we can make this nav-pills collapsible and responsive when size is reduced just as we can do easily with nav-bars? thanks in advance

Original source