Documentation request - logo size

Hi there,

I know that the menu height controls the logo size

This is only the case when the navigation as a header is used:
https://docs.generatepress.com/article/navigation-as-a-header/

If you are using the default header, then the logo size can be controlled in the customizer:
https://docs.generatepress.com/article/adding-header-logo/

Can you link me to the site in question if this doesn't help?

Hi Leo,

Thanks for the reply. I didn't know that the menu line height only controls the logo size in the navigation header, so thanks for the info.

However, if I use the default header and set the logo to the required size and menu to the required height, then the menu is not vertically centered: https://snipboard.io/yZ8N0T.jpg

Alternatively, if I use the navigation header then the only way to get the required logo size is to set a high value for the menu height: https://snipboard.io/e2aAbT.jpg

I would like to have the menu vertically centered with the logo, but with a smaller height than the logo.

This is why I would like to be able to set the menu height and logo size independently. I've shared my site url, but some definitive documentation on achieving this would be really useful.

Thanks

Your site is under the coming soon page.

Can you disable it?

Oops, sorry about that. Disabled the coming soon page now.

Thanks

So when the navigation as a header is activated, there is a default 10px top and bottom padding added to the logo image:
https://www.screencast.com/t/PFbKpAzjfe

In another word, the logo height would be 20px less than the menu item height set in the customizer:
https://docs.generatepress.com/article/menu-item-height-width/

If you want the logo height to be the exact same height as the menu item height, then you can use this CSS to remove the padding:

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

If you want the reduce the logo height while keeping the menu item height, then the top and bottom paddings needs to be increased like this:

.navigation-branding img, .site-logo.mobile-header-logo img {
    padding: 20px 0;
}

Let me know if this makes sense.

Hi Leo,

Thanks for your reply. What you have posted does make sense, but I want achieve the opposite - I would like to keep the logo the size that it is at the moment, but reduce the menu height, wile also keeping the menu vertically centered with the logo.

Hope that makes sense.

Thanks

Hi there,

in that case add this CSS:

.navigation-branding img, 
.site-logo.mobile-header-logo img {
    height: 130px;
}

This will look in the logo size - now you can change the menu item height as you please.

Hi David,

That's great, just what I was after thank you. Circling back to my original question, would it be possible for you guys to add this to your documentation? I think that this would be a really useful resource.

So if it can't be added as an option in the customizer, could you document the css needed to target the logo in each of the default, navigation, sticky and mobile headers?

Thanks

Yeah - i think we can review the docs on this one :) Thanks for the suggestion .

Awesome, thanks David!

You're welcome