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

asp.net-mvc, css, less, twitter-bootstrap

Solution

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

Problem

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.

Original source