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

   <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

Answer 1

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

Answer 2

Another method to try is to set navbar li to 100%:

@media (max-width: 768px) {   #navbar li { width:100%; } }