Bootstrap: Navbar-nav isn't exactly mobile friendly

[lassombra]

The default v4 navbar doesn't stack cleanly on mobile as v3 did. I believe that v3 had significant breakpoint work in it to make sure that navbar-nav elements would stack nicely in a vertical stack on mobile devices.

[mdo]

Yeah, lots to do here and on all our navs. It's on my todo list.

[csechuan]

Yes, the navbar needs some improvement.

[coltonbrugger]

@mdo: any roadmap for navbar components? happy to help.

[edouard-lopez]

@mdo Any progress on this issue? Or any suggestion on how to solve? cc @coltonbrugger

[patrickhlauke]

Very broad suggestion for now would be to stick with v3 rather than the very early v4-alpha, as can't promise when things will get addressed at this stage.

[maxim25]

Anybody find a workaround/update?

[WuglyakBolgoink]

yes, downgrade until 3.x :(

[cvrebert]

@maxim25 When there is an update, you'll see it here; v4 is developed openly in public since the initial alpha release. Asking for workarounds doesn't make much sense since this is still alpha-stage software.
If you want stable or fairly-bug-free software, you should absolutely not be using an alpha release.

[jawise]

I've hacked a working responsive navbar with 4.0 for a current project...Came here to offer help on this since I'm not familiar with contributing to a project like Bootstrap.

[cvrebert]

@apptasia Pull requests are welcomed :smile:

[RyanZim]

Just my 2 cents:

Perhaps we could add an (optional) data- attribute that would specify the screen width that the navbar should collapse at. In v3, if you had too much content in the navbar, it wouldn't collapse soon enough; if you only had about two links, it would collapse sooner than it was needed. (I don't like to use a "hamburger" when it's unnecessary.)

[PascalPixel]

I think that BS4's navbar is extremely clean and would be in favour of adding extra classes to achieve a responsive navbar effects like BS3 as opposed to data attributes etc.

I don't have a grasp of Bootstrap's full code like @mdo and @cvrebert,
but here's a workaround code that requires as little CSS as possible within my knowledge,
please replace the CSS with Bootstrap classes on items if you know any and post your code.

<nav class='navbar navbar-fixed-top'>
  <button class='navbar-toggler hidden-md-up pull-xs-right' data-target='#collapsenav' data-toggle='collapse' type='button'>
    ☰
  </button>
  <a href='' class='navbar-brand'>Brand</a>
  <div class='collapse navbar-toggleable-sm pull-xs-left pull-md-none' id='collapsenav'>
    <ul class='nav navbar-nav'>
      <li class='nav-item pull-xs-none pull-md-left'>
        Item 1
      </li>
      <li class='nav-item pull-xs-none pull-md-left'>
        Item 2
      </li>
      <li class='nav-item pull-xs-none pull-md-left'>
        Item 3
      </li>
    </ul>
  </div>
</nav>

@include media-breakpoint-down(sm) {
  .navbar-nav .nav-item + .nav-item {
    margin-left: 0;
  }
  #collapsenav {
    clear: both;
  }
}

or in CSS:

@media (max-width: 767px) {
  .navbar-nav .nav-item + .nav-item {
    margin-left: 0;
  }
  #collapsenav {
    clear: both;
  }
}

What is happening here:

• I tried emulating my old BS3 navbar as much as possible as a first step after migration
• The .navbar-brand is pulled left by default
• I am explicitly pulling .navbar-toggler right from xs up, but hiding it from md up
• #collapsenav contains our .navbar-nav and child items
• #collapsenav is told to clear: both; on xs and sm in order to clear the line from the .navbar-brand and .navbar-toggler
• Within .navbar-nav the .nav-item's are .pull-xs-none so they become a standard list on xs and sm, while .pull-md-left makes them float left again from md up
• We have to explicitly tell .nav-item not to have margin-left on xs and sm

I hope this helps someone.

[RyanZim]

@PascalPencil I didn't know about navbar-toggler when I wrote https://github.com/twbs/bootstrap/issues/17250#issuecomment-203931328. I'm fine with using classes.

[PascalPixel]

@RyanZim Wasn't directed at anyone specifically, just posting my solution 👯

[tordans]

For me, adding this seems to do the job for now (sass).

@include media-breakpoint-down(sm)
  .navbar-nav .nav-item + .nav-item
    margin-left: 0
  .navbar-nav .nav-item
    float: none

[fuzzy76]

FWIW, I recently redesigned a site using Bootstrap 4, and this was the only real bug I encountered.

[mrkongo]

@tordans and using icons (ex: <i span...></i>)?

[mdo]

Major updates to this added in the freshly merged #19890. More to come in Alpha 6.

[PascalPixel]

Thanks @mdo, keep up the hard work.

[PascalPixel]

While @mdo works on alpha6, here is a Bootstrap 3-like navbar on alpha5:

<nav class="navbar navbar-dark bg-primary navbar-fixed-top">
  <div class="clearfix float-lg-left">
    <button aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler hidden-lg-up float-xs-right" data-target="#navbarResponsive" data-toggle="collapse" type="button"></button>
    <a class="navbar-brand">Navbar</a>
  </div>
  <div class="collapse navbar-toggleable-md" id="navbarResponsive">
    <ul class="nav navbar-nav">
      <li class="nav-item"></li>
    </ul>
  </div>
</nav>