Bootstrap: [v4 css] Collapsed navbar toggle moves to awkward position

[sejr]

I am using a navbar with only a brand image; no brand name (as shown above). You can see that the collapse button is clearly out of place, over my brand image.

Expected

The collapse toggle should remain right-floated regardless of viewport width.

Also...

Does anyone else think that the toggle collapse button should be redesigned? For instance, on dark backgrounds it should be lighter (maybe completely white). I'd also be interested in seeing the border disappear — it is always a hassle to figure out the specific CSS heirarchy to modify it.

[sejr]

It seems I can't replicate this issue on my actual iPhone when the application is in production. (This particular screenshot was taken from Chrome DevTools.)

[jnizet]

I had the same issue. It happens when there is a .container inside the .navbar, and when .navbar-toggler-right is used.

[sejr]

And isn't .container inside a navbar the correct way to align it? Not sure if there may be a new replacement.

[svenluijten]

I've posted a fix for this behaviour in #21605. Simply add this to your custom CSS file:

@include media-breakpoint-down(xs) {
    .container {
        margin-left: 0;
        margin-right: 0;
    }
}