[Resolved] "Navigation Logo Placement" Sticky PNG logo grows

[Terence]

Thanks Leo but in the end it took me about 5 minutes to set up and get right first time using Elementor what had taken me several hours of trying with GeneratePress.

I think the fundamental issue comes down to the fact that there’s an issue with GeneratePress which means that the same image is presented differently (at two different sizes) in the same location, depending on which part of GeneratePress is presenting it, and with no fine grain support provided except reverting to CSS to control it.

OK, no problem, got there in the end.

[Leo]

But look at how much code it is needed for a simple navigation like that with Elementor:
https://www.screencast.com/t/JXlzBHIz

If you don’t want to use CSS, then all you need to do is to have a logo image 60px in height if you want to use menu item height of 60px.

[Terence]

Hmm, not good. Better to resize the image with a transparent background I guess. I’ll give that a try.

[Terence]

Nothing I do seems to make any difference.

It seems such a simple task and I don’t see why it has to be so difficult.

All I want is the same size logo on my main menu and my sticky menu.

Why is it so complicated to achieve in GeneratePress?

[Leo]

It shouldn’t be very difficult – at least other users have found the solution quite easy to follow.

You should be able to achieve by going through the steps here (which is currently not implemented):
https://docs.generatepress.com/article/navigation-as-a-header/#basic

Then make sure that the menu item height and sticky navigation menu item height is exactly the same:
https://docs.generatepress.com/article/menu-item-height-width/#height
https://docs.generatepress.com/article/sticky-navigation/#menu-item-height

We’ve also made the process even simpler by adding the option Use navigation as header in the next version of GP premium which is currently in Alpha testing if you are interested:
https://generatepress.com/gp-premium-1-8/

[Terence]

Having carefully re-read those docs I now see what I was doing wrong and I also missed the part about using an element to hide the original header. Its not exactly intuitive, still it all worked and I have a navigation logo that doesn’t resize.

Many thanks.

[Terence]

The problem now is that the navigation logo is only 166px wide instead of 250px in both menus.

And it doesn’t matter that I change the height in either the sticky or the primary navigation.

A simple thing like this really shouldn’t be so complicated.

[Terence]

OK, I found the first problem and it was this little bit of code you gave me yesterday. When I removed it everything started working again.

Now I am left with one remaining problem.

When I scroll back to the top of the page there’s a single pixel line full with along the bottom of the menu. Its like a hair line separating the menu from the body. I’ve tried to find it and hide it but my CSS skills aren’t good enough.

Can you help?

[Leo]

Try this CSS:

.sticky-enabled .main-navigation.is_stuck {
    box-shadow: none;
}

[Terence]

That’ll do nicely Leo. Thank you very much.

[Leo]

Glad I could help 🙂

[Author]

Posts