How can I get always display the mobile menu button no matter screen size? I do not want the links to appear until a person clicks the mobile button. Thank you!
I realize there is a post here on Bootstrap 3, however it does not work with Bootstrap 4. Will you please advise?
Update Bootstrap 4.1.x
Exclude the navbar-expand*
class.
As of beta, the navbar-toggleable-*
class was replaced with navbar-expand-*
, but now everythings moves up a tier. Since the default state of the navbar is always collapsed/mobile (xs) you'd simply exclude the navbar-expand-*
class so that the menu is always collapsed on all tiers.
Beta demo: https://www.codeply.com/go/HiMQd9taEd
Bootstrap 4.1.3: https://www.codeply.com/go/ugmj6XKY79
Original Answer (Bootstrap 4 alpha)
In Bootstrap 4 the navbar is very different than 3.x, and it is always collapsed unless overriden by one of the navbar-toggleable-* classes. You just need to make sure your navbar doesn't include navbar-toggleable-*
.
<nav class="navbar navbar-fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="navbar-collapse collapse" id="collapsingNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Wow</a>
</li>
</ul>
</div>
</nav>
Alpha demo: http://www.codeply.com/go/LN6szcJO53