Disable sensitive navigation bar in bootstrap 4

Question

Is there a way to disable responsive navBar in bootstrap 4? I do not want a drop-down list, since in the mobile version it is still possible to see 2 links next to the brand. As a plus, I would like to know if it is possible to put links to the right in the panel. Pull-xs-right does not work correctly.

My current code is as follows:

<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> 

Thank you very well in advance.

Answer 1

The easiest way is to use 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 the response navigation bar

You can also use flexbox utilities to prevent vertical navigation on smaller screens. flex-nowrap flex-row allows the navigation bar to remain horizontal across 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, not collapsing
navbar-expand-xl - minimizes to mobile <1200px
navbar-expand-lg - minimizes to mobile <992px
navbar-expand-md - minimizes to mobile <768px
navbar-expand-sm - collapses to mobile <576px

no navbar-expand - always mobile, compensated (default)

http://www.codeply.com/go/z9VJTOBuaS

Answer 2

I would suggest using only navigation, but if you need to style the navigation bar, you can get around it by adding helper classes and removing some to make it function as you like. This should display links on mobile devices without the drop-down menu of a toggle button.

<nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-light bg-faded"> <a href="/" class="navbar-brand">PIM</a> <div id="navbarNav" class="navbar-collapse"> <ul class="navbar-nav"> <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> </div> </nav>

JSFIDDLE for reference.