Twitter Bootstrap: How to achieve an always-collapsed navbar dropdown menu?

Question

I'm using the Navbar component in Twitter Bootstrap

http://getbootstrap.com/components/#navbar

My aim is to make the navbar collapsed at all times (even when viewing on desktop-sized devices). How can this be done?

I've created this JSFIDDLE with my code so far - you'll see it is pretty standard. When the size of the result window is small, the dropdown menu is collapsed. However, if you enlarge the result window the dropdown isn't collapsed.

I've pasted exactly what's in the JSFiddle for reference:

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <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>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Answer 1

There are basically two ways of achieving what you want: redefining the CSS rules related to navbar collapsing and recompiling Bootstrap's LESS.

The first way seems easier if you know nothing about LESS, but it's really not the best one. You would have to search for all CSS rules that are affected by the event of collapsing the navbar. Off the top of my head, I can think of three rules that would be changed: .navbar-header , .navbar-collapse.collapse and .navbar-toggle :

@media (min-width: 768px)
{
    .navbar-header
    {
        float: none;
    }

    .navbar-toggle
    {
        display: block;
    }

    .navbar-collapse.collapse
    {
        display: none !important;
    }
}

Here's an example based on your fiddle.

The other way would be to change the @grid-float-breakpoint variable located in the variables.less file. In order to do that, you have to download Bootstrap source code and, after changing the desired variable, you have to recompile your LESS.

This is probably the best way of achieving your goal, since it is a "global" solution and it doesn't require any CSS overriding.

Answer 2

You can always create a right-aligned ( navbar-right ) drop-down ( dropdown , dropdown-toggle , dropdown-menu ) menu with a hamburger glyph ( glyphicon-menu-hamburger ) in it.

Example:

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            <span class="glyphicon glyphicon-menu-hamburger"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Hamburger 1</a></li>
            <li><a href="#">Hamburger 2</a></li>
            <li><a href="#">Hamburger 3</a></li>
        </ul>
    </li>
</ul>

I don't like how the hamburger becomes left-aligned on smaller screens. Other than that this works.

Answer 3

I quickly put this up: it is obvious that all those items need to be moved outside, and specifically I'm putting everything in a <div class="collapse"></div> still inside the nav container for my personal use, and everything works as expected.

Relevant code is the added

aria-expanded="false"

to the data-toggle="collapse" link, and I got the idea from the docs .

Answer 4

What I did was go here: http://getbootstrap.com/customize/ , make @grid-float-breakpoint a really high number that your screen width would never reach, download the compiled LESS file and replace your bootstrap css file on your project.

It basically says when your screen width reaches that @grid-float-breakpoint number the menu will uncollapse. A really high number ensures it never will.