"Navigation Logo Placement" Sticky PNG logo grows

And I have just discovered its exactly the same problem if you are using an Element and setting it up as the Site Header.

Hi there,

It would be better to use this method to achieve the layout you are after:
https://docs.generatepress.com/article/navigation-as-a-header/

Even better, if you are using GP Premium 1.8 (currently in alpha) then you can just use the new Navigation as Header option mentioned here:
https://generatepress.com/gp-premium-1-8/

Let me know if this helps :)

Thanks Leo. I have already got 1.8a installed and I used the Navigation as Header option you suggested. Unfortunately it gives exactly the same result, as you can see here --> and

Just checked the page and don't see a logo uploaded.

The header is also still there and that shouldn't be the case if you are using the new option.

I think I found the problem.

There's a single checkbox "Use Navigation as Header" at the bottom of Customizing > Layout > Header, which enables the magic to happen.

With that ticked, everything is working as its supposed to be, as far as I can tell.

Yup.

This is one the key new addition mentioned in the article linked above:
https://generatepress.com/gp-premium-1-8/

Which as it turns out is a different way of doing it, but it doesn't answer my original question which was why does the png image grow 36 pixels?

The logo size is automatically adjusted with the menu item height:
https://docs.generatepress.com/article/menu-item-height-width/

So that means the logo width is dictated by the "menu item height" set on "primary navigation.

OK, I get that but I don't like it because it means I can't adjust the menu height and not affect the logo width.

I guess I will just have to develop some CSS to stop that from happening and limit the logo appearance globally in that menu to 250px.

Is that the correct thing to do?

Hi there,

yes you would need a little CSS to resize the image or increase the padding around it.
Let us know if you need assistance with that.

Would you please? That would be helpful.

Can you switch to Use navigation as header method first?

You know what, this is not right. Even when I "Use Navigation as Header" it still extends the PNG by some 36px. I am going to try a test with other file formats and find out what preserves the native image size, and what doesn't.

So now you should be able to us this CSS:

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

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know :)