[Resolved] Add a new additionally class to an existing class

Home Forums Support [Resolved] Add a new additionally class to an existing class

Home Forums Support Add a new additionally class to an existing class

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #883378
    Ender

    Hello,

    I need your support for the following problem:

    I have created a class “es-fadeInUp” with special animation with following code:

        .es-fadeInUp {
            animation-name: es-fadeInUp;
            -webkit-animation-name: fadeInUp;
            animation-duration: 2s;
            -webkit-animation-duration: 2s;
        }
        @keyframes es-fadeInUp {
            0% {opacity: 0;transform: translateY(10px);}
            40% {opacity: 0;transform: translateY(10px);}
            100% {opacity: 1;transform: translateY(0);}
        }
        @-webkit-keyframes es-fadeInUp {
            0% {opacity: 0;-webkit-transform: translateY(10px);}
            40% {opacity: 0;-webkit-transform: translateY(10px);}
            100% {opacity: 1;-webkit-transform: translateY(0);}
        }

    I want use this code

    for the navigation bar (Primary and Secondary)

    and

    on the blog page (inside-article).

    And only on specific pages should this code apply.

    GeneratePress 2.2.2
    #883448
    David
    Staff
    Customer Support

    Hi there,

    you could target the .main-navigation and .secondary-navigation classes instead of adding those classes to those elements. Like so:

    .main-navigation, .secondary-navigation {
        animation-name: es-fadeInUp;
        -webkit-animation-name: fadeInUp;
        animation-duration: 2s;
        -webkit-animation-duration: 2s;
    }
    @keyframes .main-navigation, @keyframes .secondary-navigation{
        0% {opacity: 0;transform: translateY(10px);}
        40% {opacity: 0;transform: translateY(10px);}
        100% {opacity: 1;transform: translateY(0);}
    }
    @-webkit-keyframes .main-navigation, @keyframes .secondary-navigation{
        0% {opacity: 0;-webkit-transform: translateY(10px);}
        40% {opacity: 0;-webkit-transform: translateY(10px);}
        100% {opacity: 1;-webkit-transform: translateY(0);}
    }

    Then you could either use the Simple CSS plugin which allows you to add CSS to posts or pages in the editor. This would mean doing it for each page or you can use a hook element:

    https://docs.generatepress.com/article/hooks-element-overview/

    Just add the CSS within:

    <style>
    /* CSS Here */
    </style>

    Select the wp_head hook and then set your display rules where you want to apply the CSS.

    #883681
    Ender

    Beautiful, how you solved it. Thank you very much.

    #883725
    David
    Staff
    Customer Support

    You’re welcome, glad to be of help

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