Integrity - Hover rectangle colour change

[funkcrush]

Hello

I am using Integrity at the moment, once you hover over the menu items in the header, they have this red rectangle above the selected menu item. I would like to change this colour to #C4A368.

I searched the forum and found the code below but it doesn’t work for me:

.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 #C4A368;
}

[ruenel]

Hello @funkcrush,

Thanks for writing in!

The red color is from the global link color settings in X > Theme Options > Typography > Site Links. If you change the link color and link hover color, the line above your menu item will change.

It you want a red link color while having a different color for the lines above the menu items, you can only override it using a custom css. To do that, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.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 green;
}

I used a green color so that you can easily see the changes.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Best Regards.

[funkcrush]

Thanks a lot Ruenel, that worked well!

Best Wishes
Jack

[ruenel]

You are most welcome Jack!