Gone Coding Gone Coding - 2 months ago 35
CSS Question

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

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:



enter image description here

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:



enter image description here

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.

Answer

If you use the .Less source for Bootstrap, the correct solution is to modify the grid-float-breakpoint value in variables.less and recompile Bootstrap.

e.g. change this:

// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-sm-min;

to this:

// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     9999px;  // or some other large value

As the same approach is used to change the default colours (e.g. from Google Materials), this seems to be the most maintainable.