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

[Matthias]

Team Generatepress / Generateblocks,

First big thanks for your great work and terrific support.

“Float Navigation Logo Outside Container” work in main – navigation, but the logo shrinks way too much in the sticky navigation, changing the “Menu Item Height” doesn’t help with the logo size.
I did try multiple css codes with no success. Is there a way to have the logo in sticky navigation fixed and not floating?

My CSS:
.navigation-branding img {
position: absolute;
height: 120px;
top: 5px;
z-index: 10;
}

[Ying]

Hi Matthias,

Try change your CSS to:

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

[Matthias]

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.

[Ying]

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

Can you show me a mockup?

Let me know!

[Matthias]

Thanks Ying

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

[Leo]

Can you try this CSS?

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

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

[Matthias]

Thanks Leo,
I will test it later

[Leo]

Sounds good.

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

[Matthias]

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

[Leo]

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

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

[Matthias]

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.

[Fernando]

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;
}

[Matthias]

Fernando,

Thank you, perfect looks great on desktop.

[Fernando]

You’re welcome Matthias!

[Author]

Posts