on homepage display menu logo only when sticky

[Jasper]

I would like on homepage to display menu logo only when sticky, other pages sticky and normal

I tried all kinds of css but i either get both or none.

Regards

GeneratePress 1.3.46

GP Premium 1.2.96

[Leo]

Hi Jasper,

Give this a shot:

.home .navigation-logo {
    display: none;
}
.home .navigation-stick .sticky-logo {
    display: block;
}

Can you provide a link to the site if this doesn’t work?

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

[Jasper]

sorry, does not work
https://jetsupport.jsierink.nl/

[Leo]

Edited the code above. Can you give it another shot?

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

[Jasper]

that does it thanks!

[Leo]

You’re welcome!

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

[Jasper]

other quick question, do you think it is possible (on the same website) to get the topbar and menu horizontally aligned? It works with some margin for the menu but then the menu itims are not clickable anymore.

[Leo]

Sorry the menu already looks center to me?

This is what I see: https://s23.postimg.org/cwxlfcm7v/2017-04-15_0815.png

Let me know.

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

[Roberto]

Hello guys,

I found this topic while searching for a similar solution but this is not enough. I want to obtain the result shown in thi site https://www.granfondomtbbrescia.it/, that is, I would like to hide both menu and logo until the scrolldown, only in homepage.

Any chance you could help?

Best regards,
Roebrto

[Leo]

Hi Roberto,

Can you try the solution here? https://generatepress.com/forums/topic/hide-nav-top-menu-logo-until-scroll/

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

[Roberto]

Hi Leo,
thanks, the solution worked almost flawlessly. Here’s the result on our site: http://www.lazzarilucchini.com/

As I said, it is almost flawless: if you scroll slowly you can see that the transition is not fluent: first the sticky menu appears, then comes the main menu over it.
Also, on mobile the menu disappears.

Can you help with this?

Many thanks!
Roberto

[Tom]

Maybe try this:

#site-navigation:not(.navigation-stick) {
    opacity: 0;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Roberto]

Hello Tom,

this didn’t work: the menu disappears but the logo and the white top remain. I did find the solution, though:

I replaced this piece of CSS:

.home .site-header.hasScrolled, 
.home .main-navigation.hasScrolled, 
.home .secondary-navigation.hasScrolled {
    display: block;
}

With:

.home .site-header.hasScrolled, 
.home .main-navigation.hasScrolled, 
.home .secondary-navigation.hasScrolled {
    display: none;
}

Basically, if the sticky menu is shown, there’s no need to show the fixed one. Works like a charm 🙂

Thanks for your support, you guys are doing a great job! I am switching all the websites I put hands on from heavy-loaded themes like Avada/Bridge to GP+BBuilder and having great results!

Cheers,
Roberto

[Tom]

Awesome! Thanks for posting the solution that worked for you 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts