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

Question

we are developing an application and we are using twiiter bootstrap 3 we have created a navigation bar with nav-pills

Answer 1

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

    
        Toggle navigation
        
        
        
    

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

    

                                       
        
Welcome text ...
        
Kitchen
        
 Programma
        
foodart text
    

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