GenesysStack.com

Did you know how to keep Bootstrap 3 Navbar 1-line through all snaps?

The default ASP.NET MVC template has some quirks. The Bootstrap Navbar tends to start as 1 line, snap to 2 lines, then snap to 1 line again. Weird.
This is how to keep Bootstrap 3 Navbars to:
1. Col-xl, Col-lg: Your logo + your navbar text. As one-line navbar.
2. Col-md, col-sm: Your logo + your navbar as glyphicons. As one-line navbar (no two-lines here.)
3. Col-xs: Your logo + navbar hamburger menu. As one-line navbar.

The trick is to use hidden-md hidden-sm and visible-md visible-sm.

Here is the Html from default MVC template’s _Layout.cshtml:

<li><a href="#menu-1" data-toggle="collapse" data-target=".in"><div class="hidden-md hidden-sm">One<b class="caret"></b></div><span class="glyphicon glyphicon-open visible-md visible-sm"></span></a></li>

<li><a href="#menu-2" data-toggle="collapse" data-target=".in"><div class="hidden-md hidden-sm">Two<b class="caret"></b></div><span class="glyphicon glyphicon-ok visible-md visible-sm"></span></a></li>

<li><a href="#menu-3" data-toggle="collapse" data-target=".in"><div class="hidden-md hidden-sm">Three<b class="caret"></b></div><span class="glyphicon glyphicon-time visible-md visible-sm"></span></a></li>

<li><a href="#menu-4" data-toggle="collapse" data-target=".in"><div class="hidden-md hidden-sm">Four<b class="caret"></b></div><span class="glyphicon glyphicon-envelope visible-md visible-sm"></span></a></li>


Hope this helps!
- Genesys Source Dev Team

Leave your comment