Twitter Bootstrap: How To Achieve An Always-collapsed Navbar Dropdown Menu?

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-siz

Solution 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.

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

<ulclass="nav navbar-nav navbar-right"><liclass="dropdown"><aclass="dropdown-toggle"data-toggle="dropdown"href="#"><spanclass="glyphicon glyphicon-menu-hamburger"></span></a><ulclass="dropdown-menu"><li><ahref="#">Hamburger 1</a></li><li><ahref="#">Hamburger 2</a></li><li><ahref="#">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.

Solution 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.

Solution 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.