is there a way to disable the responsive navBar in bootstrap 4? I don't want the dropdown as in the mobile version it's still possible to see the 2 links next to the brand. As a plus, I'd like to know if it's possible to put the links to the right in the bar. Pull-xs-right doesn't seem to work correctly.
My current code looks like this:
<nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-light bg-faded">
<a href="/" class="navbar-brand">PIM</a>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item"><Link class="nav-link" to="/login">Login</Link></li>
<li class="nav-item"><Link class="nav-link" to="/signup">Sign up</Link></li>
</ul>
</nav>
Thanks very much in advance.
The simplest way is using the navbar-toggleable-xl
navbar-expand
class (now in Bootstrap 4) so that the menu is non-mobile (horizontal) at all widths..
<nav class="navbar navbar-expand navbar-dark bg-primary">
<a class="navbar-brand" href="#">Navbar</a>
<div class="navbar-collapse collapse">
<ul class="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>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
Demo: Bootstrap 4 Disable Responsive Navbar
You can also use the flexbox
utilities to prevent the vertical navbar on smaller screens. The flex-nowrap flex-row
allow the navbar to remain horizontal at all widths...
<nav class="navbar navbar-light bg-faded justify-content-between flex-nowrap flex-row">
<a href="/" class="navbar-brand">PIM</a>
<ul class="nav navbar-nav flex-row">
<li class="nav-item"><a class="nav-link pr-3" href="/login">Login</a></li>
<li class="nav-item"><a class="nav-link" href="/signup">Sign up</a></li>
</ul>
</nav>
How it works:
navbar-expand
-- always horizontal, non collapsing
navbar-expand-xl
-- collapses into mobile < 1200px
navbar-expand-lg
-- collapses into mobile < 992px
navbar-expand-md
-- collapses into mobile < 768px
navbar-expand-sm
-- collapses into mobile < 576px
no navbar-expand
-- always mobile,collapsed (default)