Animated Fade In Navigation?

Just new to Blocs and enjoying it quite a bit. So far I’m finding that it makes hard things easy, but at times something I would think is easy, harder than expected.

For example, how can I reproduce the very nice fade in navigation found in Eldar’s beautiful Creativity template? Can’t find anything within Blocs itself that would allow for this so I’m presuming it’s a CSS based animation that one needs to apply separately. Anyway, I’d love to better understand how this function works.

Thanks in advance.


Just use any hero bloc and set it to sticky.

More details here: Navbar question

Thanks but they’re different. Clicking the sticky button gets you a nice fade in menu, but the ones I see in Eldar’s templates are much smoother so that the transition appears once you scroll to a point where the original nav disappears, then the fade nav comes in. Tried this in Blocs preview and dev environment with the same results.

That seems like a CSS thing and not a Blocs thing.


First of all, thanks for kind words on my templates! Indeed, like @bourne mentioned, I used the sticky navbar feature in Blocs. I didn’t use any additional CSS.


1 Like

Thanks Eldar.

Still stuck here. I have both your Creativity template and my demo site up that I’m supposing both use the same simple sticky nav and yet they behave differently. Mine drops down instantaneously while yours is paced differently, coming down in a slower, more desirable fashion. Thus my thought that perhaps the CSS was modified to create the smoother transition.

Am I missing something here?

Really appreciate all you do to support the Bloc community!