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

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

48,902

Solution 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

Solution 2

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

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

Solution 3

Complete Solution

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<style>
body {
    background-color: linen;
}

.nav {
  background-color :#722872;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar {
  background-color :#722872;
 }
</style>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav nav-pills navbar-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>

</body>
</html>


                          OR

See it in CodePan

Solution 4

@Tricky12 has a good solution, i used for myself, just changed the last part.

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

The part: hidden.bs.collapse trigger when the menu is fully closed, while hide.bs.collapse trigger when it starting to close.

if you trigger the .removeClass('nav-stacked'); before collapsed menu it fully closed, will show the horizontal menu for a fraction of a second before is fully closed.

Hope this will help someone.

View more solutions

48,902

Siavosh

Updated on March 07, 2020

Comments

Siavosh about 4 years

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

ganders over 9 years

Full-on tuturial for creating from scratch, love the answer!
Murali Uppangala over 9 years

what decides when to collapse the nav bar? how to set collapsing view-port size?
Tricky12 over 9 years

@flute What you are looking for is in the bootstrap.css file. There are media queries that determine when to collapse the nav bar. You can change either the media query breakpoints (getbootstrap.com/customize/#media-queries-breakpoints) or the grid-float-breakpoint (getbootstrap.com/customize/#grid-system). Using those links, you can modify and then download your customized bootstrap CSS sheet and use it.
João Paulo Motta about 8 years

That's not collapsing, but helped me! Thanks.
Michael Humelsine about 8 years

A better script implementation would be: $('#menu-selector').on('show.bs.collapse hidden.bs.collapse', function () { $(this).find('.nav-pills').toggleClass('nav-stacked'); });
Anupam over 6 years

Thanks! This answer helped me. Also, for others info, you need to put both divs inside <div class="container-fluid"><nav class="navbar navbar-default" role="navigation"> (the author also mentioned that in text). Also, navbar-header may add it's own default background, so you can do .navbar-default { background:transparent; border-color: transparent; } if you don't want it. Also, to make it look prettier, I used $('.nav-pills').addClass('nav-stacked nav-justified'); and $('.nav-pills').removeClass('nav-stacked nav-justified'); instead
Anupam over 6 years

Also, this full code was helpful for me.