Odd placements in a fixed-top navbar within a container, XS screens

Using Bootstrap 4, Alpha 6

I’m using a fixed-top navbar, with the contents placed within a container to center. I noticed that the placement is off on XS screen sizes.

Following the directions form the Navbar docs:

Although it’s not required, you can wrap a navbar in a .container to center it on a page or add one within to only center the contents of a fixed or static top navbar.

In my attached sample code, I’m using the boilerplate navbar, with fixed-top class added, and contents placed within a container. I believe this is correct.

The issue, Bootstrap 4 on XS screen:

Working properly on Bootstrap 4 on SM screen:

Working properly in Bootstrap 3 on XS screen:

What changes on the drop down from XS to SM:

• The width of the container (540px) is removed.
• margin-left: auto and margin-right: auto are applied

This causes the container to shrink to only contain the brand logo. Because the toggler is placement: absolute relative to .container, it moves to a weird placement next to the logo in the smaller container.

My Workaround

@media (max-width: 575px) {
  .navbar {
     .container {
      margin-left: 0px;
      margin-right: 0px;
    }
  }
}

Zip file contains an example in Bootstrap 4 and a working example in Bootstrap 3 html_files.zip

[gijsbotje]

see #23056 (posted 4 hours ago) and the staging docs for more current codebase up to date docs https://twbs.github.io/staging/docs/4.0/examples/navbar-top-fixed/

[alexandre1985]

This can be fixed with

@media (max-width: 991px) {
  .navbar-expand-lg .container {
    max-width: 100%;
  }
}