Red bar on hover - nav menu link

[claudiadasilva]

Hi there,

How do I change the red bar colour that appears when a user hovers over a nav menu link?

Thanks in advance,

[jade]

Hi there,

Please try this code in the Global CSS:

.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: inset 0 4px 0 0 #000;
}

Please change the value #000 of the box-shadow to the color that you like.

You may find some CSS color value guide here: https://www.w3schools.com/cssref/css_colors_legal.asp

---

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

Hope this helps.

[claudiadasilva]

Hi @Jade,

Thanks for the speedy reply.

I added the code in the Global CSS, changed the hex value of the box-shadow, saved the changes, and purged the cache, but the red hover colour remains:

Any other edit I could make?

Thanks in advance.

[jade]

Hi there,

It could be that there is a CSS error somewhere in the codes that are in the Global CSS that is stopping the code from working.

To verify that, please copy all the existing codes here: http://csslint.net/

It should give you some information if there is any CSS error which you can try to fix.

In case there is no CSS errror, would you mind providing the link of the site in question and the login details to bypass the verification so that we can check it?

Hope this helps.