margin-top sticky nav

[Jasper]

To align the menu with the logo i gave the menu some top-margin.

.nav-aligned-right .main-navigation ul li {
margin-top: 30px;
}

But i want to apply this only when the menu is not sticky. How would i do that?

[Tom]

Which sticky effect are you using?

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

[Jasper]

none

[Tom]

Try this:

.nav-aligned-right .main-navigation:not(.is_stuck) {
    margin-top: 30px;
}

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

[Jasper]

thanks, it works fine,
and what if i choose the other sticky effect options?

[Tom]

.nav-aligned-right .main-navigation:not(.is_stuck),
.nav-aligned-right .main-navigation:not(.navigation-clone) {
    margin-top: 30px;
}

That should do it for all of the effects 🙂

• This reply was modified 5 years, 6 months ago by Tom.

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

[Author]

Posts