12

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.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
user2116499
  • 403
  • 1
  • 5
  • 15

2 Answers2

35

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 1
    Dude! Thank you so much! I mean, really. I spent 3 hours on that and couldn't find a simple way to do it. – user2116499 Jan 31 '17 at 09:42
  • Any way to justify and also **fill** the full width of the navbar? Basically the same effect as you would use `
      ` or `
        `?
     – QuantumHive Jun 11 '17 at 13:56
  • Ok, I really should have known about the `navbar-expand` but that was an issue I was having, as I had mine at `navbar-expand-md` and it was blowing down _(in height)_ the entire div. – Abela Mar 15 '19 at 04:31
0

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.

node_modules
  • 4,790
  • 6
  • 21
  • 37
Amir5000
  • 1,718
  • 15
  • 19
  • Thanks Amir, it's just that I don't have proficiency in css and using navBar makes things easier for that. If I remove navBar it will also remove the css behind, I think. Do you know how I can get the css for that then? – user2116499 Jan 30 '17 at 21:12
  • correct, but it would be much easier to copy over some of the css into a custom class, than remove functionality around the navbar IMO. I can add the CSS to the answer. – Amir5000 Jan 30 '17 at 21:13