Disable responsive (mobile) navbar in Bootstrap

Question

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.

Answer 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