Archived topic
Transition from normal to sticky navigation
9 replies · Started by bdecent gmbh on February 28, 2017
Dear Tom,
first of all, thanks for your great work.
It's a pleasure to work with your theme and made my life a lot easier.
Here's my question:
Where can I change when the transition from normal to sticky navigation takes place? My client wishes that there's a seamless transition, i.e. the normal becomes sticky. (or at least the sticky is visible as soon as the normal is hidden). I assumed there must be some kind of jquery trigger where a top offset is set, but I cannot find it.
Hope you can help!
Best
Stefan
Hi Stefan,
Have you tried the 3 transition options GP offers or you are actually wanting to modify it some more?
https://docs.generatepress.com/article/sticky-navigation/#sticky-navigation-transition
Let us know.
Hi Leo,
unfortunately, that does not help me. I guess my request was not precise enough, let me try again with an example of what I would like to achieve: http://www.reuters.com
The sticky navigation immediately shows up once the normal header navigation is gone.
In generatepress, there is a delay of round about 50-80px of scrolling until the navigation is shown.
Hope this makes it clearer.
Thx
Stefan
Have you tried the "None" transition? It activates the sticky menu immediately without any delay or transition.
Hey Tom,
that's exactly what I want; feeling a little silly now because it was so simple and evident...
Sorry for the inconveniences! (I thought that it would simply remove the transition, but display it after the delay; at least that's what I thought that I had seen while testing all the features).
Great, many thanks!
And generatepress continues to be be my favourite theme :)
(or maybe rather framework)
Best
Stefan
Glad I could help, and that you're enjoying GP! :)
Hello,
I will post my question here because I feel this topic is almost what I'm after.
So, basically I would like an instant fade to the sticky, like seen here:
https://contrast.fi/en/references/relex-solutions
I know it's a small thing, but it makes a difference in the experience. It's basically a combination of what you have available now, but it's not the "fade" transition because in GP there's a significant delay, and it's not the "None" transition because then there's no fade at all.
Would this "instant fade" be hard to achieve?
Hi there,
thats just a transition of the background color.
So if No Transition is set you can still use the .is_stuck class that gets appended to the Nav on scroll to change is background color eg.
.sticky-enabled .main-navigation {
transition: background 0.3s; /* transition between colors */
}
.sticky-enabled .main-navigation.is_stuck {
background-color: #fff; /* sticky background color */
}Aah how silly, of course it's just a transition :)
Thank you that worked great!
Glad to be of help.
