Leo Alfred Leo Alfred - 2 months ago 7
CSS Question

(Bootstrap 3) How to have navbar on small screens appear the same as navbar on big screens

I'm creating a bootstrap navbar that is fixed to the top of the screen, but on small screens I don't want the hamburger button that drops down the text to appear. Instead I just want the text to appear on the navbar like it does on large screens.

This is my navbar code

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="home.html">Home <span class="sr-only">(current)</span></a></li>
<li><a href="about.html">About</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</div>
</nav>


How, on small screens, do I make the text on the navbar appear the same as the text on the navbar on big screens?

Answer

Changing the collapsed mobile navbar breakpoint

The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).

Here's where that specific variable lives: https://github.com/twbs/bootstrap/blob/57260f16b364e4cb559cd65159197fd1cf5248f7/less/variables.less#L321