Archived topic
Fade menu in using css, 10 sek. after page is loaded
4 replies · Started by Anders Nielsen on June 16, 2019
Hi
Is there an good way of fade the menu in using css, 10 sek. after page is loaded.
I'm creating landingpages for adwords, and I want the menu to be hidden, so people start scrolling first.
Hi there,
you could add some CSS animations on the elements you want to fade in eg.
#site-navigation,
#sticky-navigation {
-webkit-animation-name: NavFadeIn;
animation-name: NavFadeIn;
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@-webkit-keyframes NavFadeIn {
0% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes NavFadeIn {
0% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}So this is setting the site-navigation and sticky-navigation to opacity 0 on load. The animation runs once over 10 seconds, 90% ( 9 seconds ) through the animation the opacity remains zero and then fades in to solid in the last second.
Ok cool, is there a way I can add it to only some pages, and not entire site?
In the "elements" I miss a "URL contains" or "URL starts with" - then I could load the css like that :)
Used google GTM
If you are using the Simple CSS plugin, then you can add the CSS to the specific pages you'd like the code to load:
https://docs.generatepress.com/article/adding-css/#simple-css
The other way is to use the unique page/post id in the <body> tag.
So #site-navigation becomes .page-id-xxx #site-navigation
