Shake Animation in Page Menu

Figured it out, nevermind. Syntax error I overlooked 1,000 times in a row.

Happens to me all the time! Remember that there is a Custom CSS feature in the customizer (under Other Options) so you don’t have to create a child theme for simple CSS changes, but you seem very savvy.

Can you mention what was the syntax error?

KOKO,
I basically replicated the above CSS for a bunch of different classes that I thought would apply, because I didn’t know which one would actually get the job done (definitely not good practice, but i will definitely throw in the occasional hack when desperate) and i left the “.” off of the front of the class definition. So in the code above, instead of typing “.current-page item a:hover{…}” I typed “current-page-item a:hover{…}”

The code pasted above doesn’t have the error in it.

That’s the thing. I’m no css bigshot but I saw no errors with the code and it doesn’t work for me.

I’m using a child theme and the style.css has only this in it and it’s not working… =\

KOKO,
Here is all the CSS I used to turn off the shake effect. Something in there worked, but I haven’t gone back to figure out what did and what didn’t. Again…I know this is bad programming style, just sharing what got the job done for me.

.main-navigation li.current-menu-item > a:hover {
animation: none !important;
-webkit-animation: none !important;
}

.menu-item a:hover, .menu-item-type-post_type a:hover, .menu-item-object-page a:hover, .current-menu-item a:hover, .page_item a:hover, .current_page_parent a:hover{
animation: none !important;
-webkit-animation: none !important;
-moz-transition: none !important;
-webkit-transition: none !important;
-o-transition: color 0 ease-in !important;
transition: none !important;
text-decoration:underline;
}

.current-page-item a:hover{
animation: none !important;
-webkit-animation: none !important;
-moz-transition: none !important;
-webkit-transition: none !important;
-o-transition: color 0 ease-in !important;
transition: none !important;
}

#site-navigation li a:hover{
text-decoration: underline;
animation: none !important;
}

If you’re able to isolate which style is the only necessary one, I’d love to hear about it : )
– Rick

Actually, this is all you need.

.menu .current-menu-item > a:hover,
.menu .current_page_item > a:hover {
	-webkit-animation: none;
	animation: none;
}

That’s enough to override the default styles.

I am highly disappointed in both of you.

Scott your code didn’t work. rightsidehealth your code is superfluous and wasteful.

Making me hard refresh a million times… sheesh.

The smallest correct code:

.menu-item a:hover{
animation: none !important; /*Firefox*/
-webkit-animation: none !important; /*Chrome*/
}

Now we just need those selected menu items to not be invisible and all will be well. ??

Hmm. I checked and it worked for me. Your code isn’t as specific, but it works.

I wish the shake effect was an option in customization UI of Decode.