'Disable responsive (mobile) navbar in Bootstrap

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.

Solution 1:^[1]

Bootstrap 5 (update 2021)

The navbar-expand* class are still used in Bootstrap 5. Therefore if you want to prevent the Navbar from collapsing (stacking vertically) use navbar-expand. Due to changes in padding, Bootstrap 5 Navbars do require an inner container.

Bootstrap 4 (original answer)

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)

http://codeply.com/go/z9VJTOBuaS

Solution 2:^[2]

I'd suggest using just a nav, but if you need the styling of the navbar you can get around it by adding the helper classes and removing some to get it to function as you want. This should display the link items on mobile without the toggle button dropdown functionality.

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	node_modules

'Disable responsive (mobile) navbar in Bootstrap

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]