- This topic has 5 replies, 2 voices, and was last updated 3 years, 12 months ago by
Tom.
-
AuthorPosts
-
April 21, 2017 at 10:25 am #308619
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.46GP Premium 1.2.96April 21, 2017 at 7:54 pm #308776Tom
Lead DeveloperLead DeveloperHi 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-developmentApril 21, 2017 at 10:05 pm #308822Eric
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 π
April 22, 2017 at 10:48 am #309009Tom
Lead DeveloperLead Developer1. 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-developmentApril 22, 2017 at 11:30 am #309038Eric
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.
April 22, 2017 at 7:09 pm #309159Tom
Lead DeveloperLead DeveloperNo problem π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.