- This topic has 4 replies, 3 voices, and was last updated 3 years, 11 months ago by
.
-
Posts
-
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.
Customer Support
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
Customer Support
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-cssThe other way is to use the unique page/post id in the
<body>tag.So
#site-navigationbecomes.page-id-xxx #site-navigation
- You must be logged in to reply to this topic.