Renew CSS overidding Custom CSS

[emopez]

I have been trying to get rid of the box-shadow from the nav menu. I added the amended code to the custom css, but it is not doing anything. When I look at the code in Firefox my custom code seems to be overridden, all my other custom code is working except for that. The site is https://enzacon.co.za/site/

.x-navbar .desktop .x-nav > li > a:hover > span, .x-navbar .desktop .x-nav > li.x-active > a > span, .x-navbar .desktop .x-nav > li.current-menu-item > a > span {

box-shadow: none;

}

[Prasant]

Hello @emopez,

Thanks for asking.

Try updating the code with following CSS under X > Theme Options > CSS:

.x-navbar .desktop .x-nav > li > a:hover > span, .x-navbar .desktop .x-nav > li.x-active > a > span, .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
box-shadow: none !important;
}

You can learn more about !important property in following article.

When Should You Use !important in CSS?

Let us know how it goes.

Thanks.

[michaelbourne]

It also looks like you’re not placing your CSS into Theme Options > CSS (Global CSS)

If you place it there, it will be printed on the page after the X styles, therefor making it override them. Currently I see you have it in the WP customizer, and perhaps another 3rd party tool, both of which are printing the inline styles before X does.

[emopez]

I was using the globall css but the !important did the trick

[emopez]

Thanks so much this did the trick. I will also read the article you sent me.

[jade]

You’re welcome!