How to make the Bootstrap Navbar stay collapsed

I am setting up a website by using the customizr wordpress theme which is based on twitter bootstrap and would like to have the navbar always appear in the collapsed layout so that the menu items are only visible by clicking on the navbar-toggle button (three horizontal lines).

I believe that I have to modify the CSS the @media min and max width but is not working properly.

In simpler terms, I want it to be appear on my desktop the same way it would on a mobile device.

Answer

July 17, 2014

KyleMit

Add the class always-open to your navbar and then use the following CSS:

.navbar.always-open {
    border-radius: 0;
}
.navbar.always-open .navbar-header {
  float: none;
}
.navbar.always-open .navbar-toggle {
  display: block;
}
.navbar.always-open .navbar-collapse {
  border-top: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar.always-open .navbar-collapse.collapse {
  display: none!important;
}
.navbar.always-open .navbar-nav {
  float: none!important;
  margin: 7.5px -15px;
}
.navbar.always-open .navbar-nav>li {
  float: none;
}
.navbar.always-open .navbar-nav>li>a {
  padding-top: 10px;
  padding-bottom: 10px;
}

Example HTML:

<pre><code><nav class="navbar navbar-inverse <b>always-open</b>"> <div class="navbar-header"> <a class="navbar-brand" href="#">Brand</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse"> <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> </nav> </code></pre>

Demo in fiddle

Screenshot:

*Adapted from this bootply

BTW, if you're building your own version of Bootstrap with less:
You can just alter the @grid-float-breakpoint from @screen-sm-min to 999999999px