Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

Logo and menu icon out of alignment

  • Greg
    March 23, 2023 at 3:30 am

    Hi guys,

    Bit of a strange issue I’ve noticed since the latest GP update installed today.

    My logo and SVG menu icon seem to be out of alignment. The logo and SVG icon are both 70px in height. But when I check the two sides, the navigation side (.nav-float-right #site-navigation) is slightly lower.

    URL shared in private info.

    Any suggestions appreciated.

    Thanks,
    Greg

  • Leo
    March 23, 2023 at 10:38 am

    Hi Greg,

    Are you still having the issue? The alignment looks pretty good to me here:
    https://www.screencast.com/t/9BmzpZoOmVxy

    Did you change the HTML markup of the logo somehow? I see an extra div with hide-on-mobile class added which isn’t necessary by the way.

    Let me know 🙂

  • Greg
    March 23, 2023 at 11:22 am

    Hi Leo,

    Thanks for your reply.

    Yes, still having the issue – you can see it on your screenshot too, the menu icon looks as if it’s centered vertically whilst the logo is at the top. It’s not as noticeable on desktop but on mobile it’s more obvious.

    Yes so I could display a simplified logo on mobile than tablet/desktop. Is there an easier way to do that now?

    Thanks,
    Greg

  • Leo
    March 23, 2023 at 3:55 pm

    Yes so I could display a simplified logo on mobile than tablet/desktop.

    I believe the custom HTML is causing the issue – can you remove that solution to confirm?

    The mobile header option might also work well for you:

    Mobile Header

    This has been available for a long time though so not sure if you’ve already tried it.

    Let me know if this works 🙂

  • Greg
    March 24, 2023 at 4:13 am

    Thanks for your reply, Leo.

    Think I found the cause, it was two things.

    The default flex alignment for .inside-header is set to center.
    And .gp-icon svg has a default of ‘top: 0.125em’.

    So, I’ve set my own CSS to change these:

    .inside-header {
	align-items: flex-start;
}
.custom-id svg {
	top: 0!important;
}

    Thanks,
    Greg

  • Leo
    March 24, 2023 at 4:04 pm

    Glad to hear 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.