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: ```

Accepted Answer

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.

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

Solution

Problem

Related problems