[Resolved] Animated sticky nav/header with CSS and vanilla javascript (or just CSS)

[Joseph]

Looking for a way to get rid of jquery. But I do like the fixed navigation for long content. But I don’t like the CSS solution as there is no animation. So I came across this, and was wondering whether this was feasible with the way GP does things. Also I am using a merged header, which might complicate things.

if this works with a normal header/nav I can definitely work with that.

Vanilla JS – https://www.sitepoint.com/animated-sticky-navigation-menu-javascript/

CSS only – https://codepen.io/yuchehsieh/pen/ExaWvbe

[Leo]

Hi Joseph,

I’m not sure if the vanilla JS solution will work out of the box with GP unfortunately – it might require some tweaking.

We are hoping to replace the current sticky navigation with CSS only but as you pointed out, it’s difficult with the transition options.

If you can live without the animation/transition, then CSS should do:

.site-header {
    position: sticky;
    top: 0;
    z-index: 99;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Joseph]

So the animation (of fading in and out) would be nice, but just having something was better than nothing. I found if I added a top bar, and set the nav/header to sticky, at least it would move a little and then stick. This works out well. The code I used:

site-header, .main-navigation {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
	  z-index:100000 !important;
}
.main-navigation {
    top: 65px;
}

#mobile-header {
    position: sticky;
    top: 0;
}

But I’ll change the z-index to 99 and see if that works.

Not sure if this requires a different topic to start, but is there a way to set the background transparency really low, and relative positioning, but then 0% transparency and fixed when it is in stuck position? Sort of a backdoor overlay if you know what I mean 😀

[Leo]

A new topic for the separate question would be good 🙂

Thanks!

[Author]

Posts