Collapse Menu in Bootstrap3 without Toggle


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

enter image description here

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

enter image description here

Any thoughts?


Remove the collapse button and the navbar-collapse class. From the 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>
      <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>

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 {

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

Leave a Reply

(*) Required, Your email will not be published