Navigation logo height

Hi there,

When the navigation as header option is used, the logo height is controlled by the menu item height property.

The logo actually is shown big only when I set the menu item height in the primary navigation to the double.

That should be the correct way. What's the issue with that?

The issue is the file size and the type of scaling.

I have uploaded a file 70x350 (4.6 k) as suggested but it is displayed ´to small, something like 90x18. I tried then with 140x700 (24 k), but the result is the same.

In this case, to have it as it shall be I have to set the primary navigation height to 70 px and the page hero height to -70 px. Furthermore, the image ist not linear scaled on mobile, but the aspect ratio changed.

I have then loaded an image 135x35 (1.9 k) and this is scaled correct on mobile, when I set the menu item height to 50 px, but it is shown bigger (why?) and pixelated on desktop.

I played a bit around with the settings and inserted a .gif logo 350x70.

The setting which would fit best now would be Menu item height
on desktop 70 px, on mobile 50 px.

Actually, the logo is looking different in the Customizer than in reality. It's therefore quite hard to understand, what is correct.

I have set now the menu item height in desktop to 70 px and in off canvas on 50 px + sticky navigation 50 px. But as far as I can see, the logo is crushed on mobile (aspect ratio changed, logo is too high) both in the off canvas and in the sticky menu.

The mobile logo looks good to me currently:
https://www.screencast.com/t/rstDjETg
Is that not what you are seeing?

There are default 10px top and bottom padding we can remove with this CSS:

.main-navigation .navigation-branding img {
    padding: 0;
}

Can you disable Autopimize so I can inspect the code better if you need further help with this?

Thanks :)

Yes, I found the setting for the height in the customizer, switching between desktop and mobile view.

About the CSS to remove the top and bottom padding, seems not to work.

I've disabled Autoptimize.

Edited the CSS above.

Can you give it another shot?

Now it's perfect, thank you :)

No problem :)