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

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

Home Forums Support Hamburger icon not vertically centered with logo in header.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #630937
    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

    GeneratePress 2.1.3
    GP Premium 1.6.2
    #631077
    David
    Staff
    Customer Support

    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.

    #631097
    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.

    #631105
    David
    Staff
    Customer Support

    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.

    #631132
    Jay

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

    #631335
    David
    Staff
    Customer Support

    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.

    #631626
    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?

    #631635
    David
    Staff
    Customer Support

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

    #631748
    Jay

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

    #632062
    Tom
    Lead Developer
    Lead Developer

    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/

    #632070
    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.)

    #632074
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #632314
    Jay

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

    #632534
    Tom
    Lead Developer
    Lead Developer
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.