Easiest way to have a bootstrap layout where the burger menu is always visible

Question

I have seen many people ask the opposite, to make the burger menu never appear, even in the small screen sizes, but I can't find how to easily always have the burger menu enabled.

As it normally appears:

This is assuming a standard Bootstrap 3 configuration, as generated by a Visual Studio 2013 Web Application project, so you should not need the standard Visual Studio MVC HTML or the Bootstrap CSS.

As I would prefer it to appear:

From generated master page from a VS 2013 Web Application Project

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <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>
            @Html.ActionLink("ProjectName Here", "Index", "Home", null, new { @class = "navbar-brand hidden-xs" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)</li>
            </ul>
        </div>
    </div>
</div>

Update:

Obviously a solution using .Less is perfectly acceptable when using ASP.Net MVC, so you do not have to restrict answers to raw CSS. Recent developments mean adding Bootstrap.less to a project is now trivial via NuGet. In fact most plain CSS answers will suffer from being less maintainable that any solution that reproduces the minimal css from the original source.

Answer 1

You can use this CSS to override Bootstrap's default navbar behavior..

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

Using CSS: http://bootply.com/jXxt4Dc54A

UPDATE

This question was recently changed and tagged with LESS. As @cvrebert mentioned when the question was originally asked, the @grid-float-breakpoint can be set to a large value if the LESS source is being used.

Using LESS: http://www.codeply.com/go/UNFhTH5Hm3

UPDATE for Bootstrap 4

For Bootstrap 4, the new navbar-expand-* classes have been added to control the navbar collapse breakpoint. Now the navbar is always collapsed, unless one of the navbar-expand-* classes is explicitly used. Therefore no CSS (or SASS variable) changes are necessary to have the hamburger always show.

<nav class="navbar navbar-light bg-light fixed-top">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar1">
        ☰
    </button>
    <div class="navbar-collapse collapse" id="collapsingNavbar1">
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

Bootstrap 4: http://www.codeply.com/go/9WCE8jYmW8

Answer 2

I found that @Skelly's solution resulted in the menu collapsing back up straight after opening. (at least with the non-fixed version of the nav). So I wrote some more CSS:

(remove or change media query as desired)

@media screen and (max-width: 991px){
    .navbar-default{
        background:none;    
        border:0;
        position:absolute;
        top:15px;
        right:15px; 
    }
    .navbar-collapse{
        background:#f5f5f5; 
    }
    .navbar-collapse.collapse{
        display: none!important;
        height: 0!important;
        padding-bottom: 0;
        overflow: hidden!important;
    }
    .navbar-toggle.collapsed{
        display:block!important;    
    }
    .navbar-toggle{
        display:block!important;    
    }
    .navbar-collapse.collapse.in{
        display:block!important;    
        height:auto!important;
        overflow:visible!important;
    }
    .navbar-nav>li,.navbar-header{
        float:none; 
    }
    .navbar-default .navbar-toggle.collapsed{
        background:#fff;    
    }
}

If you don't want to modify the LESS file and re-compile.