[Alejandro Jose SParticipant]

hi,

I used to have a transition animations on the links and woocommerce cart of my navbar, but they stopped working after a while. this was (more or less) the code i wrote for it back then (i erased it yesterday and don’t remember it all):

.navbar{
-webkit-transition: all 500ms ease-out 1s;
-moz-transition: all 500ms ease-out 1s;
-o-transition: all 500ms ease-out 1s;
transition: all 500ms ease-out 1s;

}

but it wasn’t working, could you please tell me how to achieve said transition or point me to the right direction, please? thanks!

[RadModerator]

Hi there,

Thanks for writing in.

Would you mind letting me know what transition’s you’re trying to achieve? It should be

.x-navbar{
-webkit-transition: all 500ms ease-out 1s;
-moz-transition: all 500ms ease-out 1s;
-o-transition: all 500ms ease-out 1s;
transition: all 500ms ease-out 1s;

}

but still incomplete. There probably more since animation will not work just like that 🙂

Please provide more details and your site’s URL. Thanks!

[Alejandro Jose SParticipant]

This reply has been marked as private.

[Nabeel AModerator]

Hi again,

You can try this code instead:

.x-navbar .desktop .x-nav>li>a:not(.x-btn-navbar-woocommerce){
     border-bottom:none;
    -webkit-animation: fadein .80s; 
       -moz-animation: fadein .80s;
        -ms-animation: fadein .80s;
         -o-animation: fadein .80s;
            animation: fadein .80s;
}

Let us know how this goes!

[Alejandro Jose SParticipant]

Nope not working, it’s still the same when hovering on it :/ (i purged cache and everything before and after adding the code)

[LelyModerator]

Hello Alejandro,

To clarify the issue, the transition you want is to change color opacity on hover?
Currently, your navbar menu font color is set to this #e98a2a. Then on hover it is set to this :#ffca6c;. You might not be seeing the effect because there might be CSS syntax error. Would you mind giving us access so we can check further?

[Alejandro Jose SParticipant]

I partialli found a solution.

i had to change to transition instead of animation and the code ended up being like this:

.x-navbar .desktop .x-nav>li>a{
     border-bottom:none;
    -webkit-transition:  all 0.3s linear; 
       -moz-transition:  all 0.3s linear;
        -ms-transition:  all 0.3s linear;
         -o-transition:  all 0.3s linear;
            transition:  all 0.3s linear;

But the woocommerce cart is still not transitioning, can you please tell me what am i doing wrong?

[JadeModerator]

Hi Alejandro,

Please try to update your code to:

.x-navbar .desktop .x-nav > li.x-menu-item-woocommerce > a,
.x-navbar .desktop .x-nav > li > a {
     border-bottom:none;
    -webkit-transition:  all 0.3s linear; 
       -moz-transition:  all 0.3s linear;
        -ms-transition:  all 0.3s linear;
         -o-transition:  all 0.3s linear;
            transition:  all 0.3s linear;
}

Hope this helps.

[Author]

Posts