[Resolved] Fade menu in using css, 10 sek. after page is loaded

Home Forums Support [Resolved] Fade menu in using css, 10 sek. after page is loaded

Home Forums Support Fade menu in using css, 10 sek. after page is loaded

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #931071
    Anders Nielsen

    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.

    This is my site: https://goteam.dk

    I use Generatepress and loves teambuilding πŸ˜‰

    #931201
    David
    Staff
    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.

    #931493
    Anders Nielsen

    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 πŸ™‚

    This is my site: https://goteam.dk

    I use Generatepress and loves teambuilding πŸ˜‰

    #931607
    Anders Nielsen

    Used google GTM

    This is my site: https://goteam.dk

    I use Generatepress and loves teambuilding πŸ˜‰

    #931631
    Leo
    Staff
    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-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

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.