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

[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.

[David]

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.

[Ender]

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

[David]

You’re welcome, glad to be of help

[Author]

Posts