Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Changing the font color of the sticky menu + smooth transition

Home Forums Support Changing the font color of the sticky menu + smooth transition

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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.46
    GP Premium 1.2.96
    #308776
    Tom
    Lead Developer
    Lead Developer

    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?

    #308822
    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 🙂

    #309009
    Tom
    Lead Developer
    Lead Developer

    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%;
    }
    #309038
    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.

    #309159
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.