[Resolved] Guideline on Mobile Header Logo

[Kris]

Hi,

I turned Mobile Header on and then added a 100 x 36 logo image but the logo is very tiny. Any guidelines on the size needed or CSS to make this fit?

Thanks much,
Kris

[Leo]

Hi there,

Looks like the mobile header logo image you’ve added is only 71 x 25px.

You might want to go a bit bigger than that, then the size is controlled by the menu item height with mobile toggle on:
https://docs.generatepress.com/article/menu-item-height-width/

There is also the default padding around the image you can remove:

.site-logo.mobile-header-logo img {
    padding: 0;
}

Let me know if this helps 🙂

[Kris]

Hi Leo,

Removing the padding did the trick. I have a couple of sizes I will work with to get the fit right. I was just experimenting with the smaller image sizes.

Thanks again!
Kris

[Kris]

Leo,

Another quick one. What classes to remove the padding around the sticky logo?

Thanks
Kris

[Leo]

For the sticky mobile header logo?

It should be the same.

[Kris]

Nope the desktop or wide sticky. It is tiny. Looks fine on mobile.

I added the logo to Customize|Layout|Sticky Navigation.

Thanks!

[Leo]

Ahh the navigation logo.

Can you open a separate topic for this?

Thanks 🙂

[Author]

Posts