[Support request] Apply Smooth Transition to Sticky Navigation (In-and-Out)

[Shahas]

Hi, I’m very much impressed with the support from you guys from the last topics and i must say i’m a proud GeneratePress user :).
How can i apply a smooth transition effect for the sticky navigation on in and out? Right now the sticky navigation only has a smooth fade-in effect. Also is it possible to trigger the sticky navigation according to my choice of window location?

I just want to be it like the navigation in this website: https://www.dtelepathy.com/blog/resources/26-free-condensed-fonts-to-propel-your-next-project

[Tom]

Hi there,

Give this CSS a shot:

.main-navigation {
    transition: background-color 500ms ease;
}

It’s not possible to choose when the sticky navigation initiates at the moment, unfortunately.

Glad you’re enjoying GP! 🙂

[Shahas]

It works, but the transition work for background-color only, instead i want it for both background-color and ‘top’ attribute i.e. sticky navigation should appear slowly while scrolling each time. Is it possible ?.

Can i achieve the initialization of sticky navigation by editing any of the theme’s js files?

[Tom]

That’s only possible if you always show the sticky navigation (not only when scrolling up). Then you can choose the “Fade” option.

[Author]

Posts