“Float Navigation Logo Outside Container” in main-nav but not in sticky-nav

Hi Matthias,

Try change your CSS to:

.inside-navigation img {
    position: absolute;
    height: 120px !important;
    top: 5px;
    z-index: 10;
}

Thanks Ying,

This is great.
Another option is it possible to not floating the logo outside the container in the sticky navigation just floating the logo in main navigation.

Hum...I'm not sure I understand what you are trying to achieve..

Can you show me a mockup?

Let me know!

Thanks Ying

Link to a quick mockup in the private information (don't know how to post it here)

Can you try this CSS?

.main-navigation:not(.navigation-stick) .navigation-branding img {
    position: absolute;
    height: 120px;
    top: 5px;
    z-index: 10;
}

Thanks Leo,
I will test it later

Sounds good.

Thanks Leo,
But the logo shrinks way too small like it did before Yings CSS change.
See images uploaded.

So what is the ideal solution you are after?

Perhaps you can try increasing the sticky navigation menu item height?
https://docs.generatepress.com/article/sticky-navigation/#menu-item-height

Thanks Leo,

No, increasing the menu item height doesn't work, the logo is still too small, compared to the logo when used in sticky menu without "Float Navigation Logo Outside Container".

Ying's recommended CSS changes works fine for now.

See link in "Private information" for an ideal solution.

Hi Matthias,

You can try something like this instead:

.main-navigation:not(.navigation-stick) .navigation-branding img {
    position: absolute;
    height: 120px;
    top: 5px;
    z-index: 10;
}

.main-navigation.navigation-stick .navigation-branding img {
    height: 60px;
    padding: 0;
}

Fernando,

Thank you, perfect looks great on desktop.

You’re welcome Matthias!