Changing the font color of the sticky menu + smooth transition

[Eric]

Is it possible to change the color of the text in the menu from white in the initial position at the top to black when it becomes a sticky menu in a smooth fading way? What css should I use?

And is it possible to have a smooth fading transition between the regular menu and the sticky menu when I scroll back up? Right now only when I scroll down it is smooth.

Thank you,

Florian

GeneratePress 1.3.46

GP Premium 1.2.96

[Tom]

Hi there,

Try this CSS:

.main-navigation.navigation-stick .main-nav ul li a, 
.navigation-stick .menu-toggle {
    color: #000;
}

Not too sure what you mean about the smooth fading – can you link me to your site?

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

[Eric]

Hi Tom,

Thanks for your quick reply.

Here is the link: http://kundalini.com.tw/ (work in progress)

What I want to achieve is that the text in the menu fades to a black color in the sticky menu when you scroll down. The code you provided didn’t achieve this yet.

The other thing I would like to achieve is that when the user scrolls back up the background of the menu and the text in the menu fade back to their original state (no background and white text). In other words: right now there is a fading animation when I go down (for the background of the menu) but I also like it to be there when you scroll back up.

I hope this makes sense…

PS: I also have an issue with  characters appearing randomly but I’m working with someone else on that, however if you know how to fix it quickly that would be appreciated too 🙂

[Tom]

1. You want the text to turn black even though the background turns black? I’m not seeing the CSS I provided above? It should work if that’s what you’re going for.

2. It might be better to use the “None” transition for the sticky navigation. Then the background color can fade in/out: https://docs.generatepress.com/article/sticky-navigation/

That will also allow you to remove this custom CSS:

#site-navigation {
    position: fixed;
    width: 100%;
}

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

[Eric]

Ok thanks! When I removed the fade option your code worked.

Maybe I will still look for another option with a menu plugin but I appreciate your help.

[Tom]

No problem 🙂

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

[Author]

Posts