Integrity Nav Bar Hover Line Color

Support
#1

So I wanted to remove the red line that appears when hovering the navbar items which i was able to do, except for the fact that when i go into the submenu the line is back. I can’t seem to find any css to target this item directly. Please help.

#2

Hi @industriallock,

Thank you for reaching out to us. To remove the red bar on hover, please add the following code in the Theme Options > 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: none !important;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#3

That worked!!! awesome, thanks for the quick reply.

#4

What if i just want to change the color?

#5

Hey @industriallock,

To change the color, first find and remove the previous customization:

.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: none !important;
}
.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

Then use the following code to change the color of the hover bar:

.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 8px 0 0 0 #3ab5d1 !important;
}

To learn more about box-shadow property please see https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Cheers!

#6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.