Navbar Container Brand and Toggle Button Overlap on Small Screens

[tikenn]

When utilizing a container with a toggleable navbar on a small screen, the navbar-brand and the navbar-toggler overlap. I think this is a combination effect from the width being removed from the container at the small screen and the margins on the left and right being set to auto. The overlap makes the container feature of the navbar unusable.

Environment

• OS: Windows 10 Desktop
• Browsers
  • Chrome v57.0.2987.133
  • Opera v44.0.2510.857
  • Internet Edge v38.14393.0.0
  • Firefox v51.0.1

Test case: https://jsbin.com/riroregime/2/edit?html,css,output

[iatek]

I think this is a duplicate of #21590, and has been fixed in v4-dev branch.

[zalog]

This was fixed here #22230
Take a look https://jsbin.com/rusafep/edit?html,css,output
Make sure you update html markup https://github.com/twbs/bootstrap/blob/v4-dev/docs/migration.md#navbar

[tikenn]

Thanks! And very sorry for the duplicate post.

[Johann-S]

Closed thanks to @zalog 👍