[Support request] Mobile Header Logo

[Joseph]

I followed this guide to center my logo in the navigation: https://docs.generatepress.com/article/centering-logo-navigation/

How can I use the .svg format of my logo in the center so it is the best quality on both desktop and mobile. As of right now it is fine on desktop, but when I enabled mobile header like the guide said, my logo became distorted.

[Tom]

Hi there,

Try adding this CSS:

.mobile-header-navigation .mobile-header-logo img {
    height: auto;
}

#mobile-header > .inside-navigation {
    align-items: center;
}

Let me know 🙂

[Joseph]

#1 That worked for centering the logo and making it not distorted. When I try to customize the hamburger menu now (remove “menu” text and change position) the changes are not responsive when in the customizer.

#2 How can I remove the logo in the center of the mobile drop down menu so there is no gap in between the pages listed in the menu.

[Tom]

1. Not too sure what you mean – looks like the “Menu” text has been removed? Where do you want it to display?

2. Try this:

.mobile-menu-open .site-logo {
    top: 0;
}

[Author]

Posts