Collapse Menu in Bootstrap3 without Toggle

Issue

Is there a Bootstrap3 component that simply collapses a menu at a breakpoint without adding a toggle. For example, if I have a horizontal menu that looks like this on desktop

at screen widths below 768px I would like it to simply stack without collapsing into a toggle like this

Any thoughts?

Solution

Remove the collapse button and the navbar-collapse class. From the getbootstrap.com examples, something like this should do the trick:

<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</div>

You will have to add a media query to make sure that padding is added to the content in mobile display.

I have made a Bootply here where I added the following CSS to make it work:

@media screen and (max-width: 768px) {
  #wrap > .container {
    padding-top:200px;
  }
}

Answered By – NicoFerna

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0