[Resolved] Hamburger icon not vertically centered with logo in header.

[Jay]

I have additional css in place to change the size of my logo and the size of the hamburger icon based on screen size, so everything starts out at desktop size and gradually decreases at different breakpoints. I also have the hamburger icon replacing the desktop navigation links at an earlier point than GP does it by default.

Right now all of this working correctly, except the vertical alignment of the hamburger icon is always off by a few pixels (you have to look closely to really notice as it’s only a minor difference, but it’s definitely off a bit) at each breakpoint (starting at 1200px and downward) compared to my logo, which appears to always be centered correctly at every screen size.

I’ve played with the css a little, but I can’t figure out what’s causing this tiny alignment issue or how to correct it.

Any ideas?

Thanks

[David]

Hi there,

try this CSS:

.menu-toggle:before {
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

You could probably get away with just the vertical alignment rule, but this should cover all browsers, fingers crossed.

[Jay]

Thanks for the reply. I added it (see url), but it still seems a little off. I actually tried just the vertical alignment rule before posting, but it did pretty much the same thing it’s doing now with the additional code included. It may get a little closer, but alignment is still off a tiny bit.

The addition of the height setting also seems to make the icon align to the top of the header at smaller screen sizes, at least when testing it on a desktop by reducing the size of my browser. I can’t recreate it on an actual mobile device, though.

[David]

Hmmm, could be a font size / line height issue. Try adjusting your menu-toggle font sizes to better suit the navigation lineheight. e.g @1200px the nav line-height is 82px and the toggle font size is 30px. Drop it down to 27px and see if that improves it.

[Jay]

As best as I can tell, I don’t think that helped.

[David]

haha, ok the only other things i can see is that icon itself is a little off vertical center. Add a 1px solid border to the :before element to see. The only other suggestion is to try adding some margin-bottom adjustment to the rule.

[Jay]

Thanks. I’ve added a border, but it looks pretty centered within it. Is adding some amount of margin-bottom to each breakpoint and eyeballing it for accuracy the only way to fix this?

[David]

You could try forcing the .menu-toggle { line-height: 100%; } this may remove the discrepancies between the line height and the font size.

[Jay]

Tried it, but now it’s aligning to the top on larger screens.

[Tom]

What about using this?:

@media (max-width: 1200px) {
    .inside-header {
        display: flex;
        align-items: center;
    }

    .main-navigation {
        margin-left: auto;
    }
}

You can run it through this tool for maximum browser support: https://autoprefixer.github.io/

[Jay]

Thanks Tom. I just tried this, but I can’t see any difference before/after adding it. Did I need to edit anything else?

(Ignore the weird empty space above my header on smaller screens, it’s a separate issue caused by a plugin bug.)

[Tom]

That should be all that’s needed to align the mobile toggle and site logo below 1200px.

I tested it on your site using developer tools and they looked perfectly aligned.

I also see you have this CSS:

.menu-toggle:before {
    font-size: 27px;
}

Try replacing it with:

button.menu-toggle {
    font-size: 27px;
}

[Jay]

Bingo! I think that did it. Thank you guys for the awesome support.

[Tom]

No problem! 🙂

[Author]

Posts