How do I keep my navbar hamburger on the same stop when the parent gets bigger?

Issue

title kind of says it. When my navbar is opened, the X goes to the middle of the parent green div. I want it to stay at the same place as the normal bars. Here is a live demo: link hidden The CSS is in styles/city.css and scroll down to see the hamburger, bar and mapNav: https://i.stack.imgur.com/QQFfA.png

Navbar closed

Where X is, but where it should be in red

Thanks in advance,

- JT

Solution

This code snippet would be a bit more elegant with your HTML, but add the following CSS to your code:

margin-left: auto; sets the highest possible margin to the left, so the hamburger menu is all the way to the right. The whole container is 50px, the width of the hamburger menu is 25px, which means the margin-left value is 25px. Apply the half of that margin to margin-right: 12.5px, that way the hamburger menu is centered when closed and remains intact.

.hamburger {
    display: block;
    cursor: pointer;
    padding-top: 10px;
    width: 25px;
    /* Remove this */
    /* margin: auto; */
    margin-left: auto;
    margin-right: 12.5px;
}

Also for next time, make sure to include your code! It's much easier to help you then.

Answered By - Sigurd Mazanti