Header Hamburger jumps to left side of viewport on mobile

If you look at the code at this scale (I use Chrome DevTools), you can see that <a class='navbar-brand'... is actually taking up all the room and pushing the button down.

Once button overflows, the float-left nature of Bootstrap takes over and it does just that.

Easiest fix is to set a max-width to the navbar-brand link to keep it from taking up all the space:

Add this to your existing media query:

@media only screen and (max-width: 414px) {
  ...
  .navbar .navbar-brand {
    max-width: 74%;
  }

  .navbar .navbar-toggler {
    max-width: 20%;
  }
}

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top