Integrity Stack Navbar Line Hover Color

Support
#1

Hi,

I was trying to change the color of the line above the menu items in Integrity. I have found several topics on this and found some custom css code that partially worked, however, the hover color does not work. I have found the following code that changed the color of the line in it’s normal state (so basically only the “.x-navbar .desktop .x-nav > li > a” line works, everything else is being ignored by the theme.

I am trying to ONLY change the hover color of the line, everything else should remain white, as the site is white and therefore it will be invisible.

This is the code I used (the on hover section unfortunately changes nothing):

.x-navbar .desktop .x-nav > li > a,
.x-navbar .desktop .x-nav > .x-active > a{
box-shadow: inset 0 4px 0 0 #ffffff;
margin-right: 3px; /* added this to create gaps between the lines */
}

/* On Hover */
.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 #f04b26;
}

Thanks for the help
Phil

#2

Hi Phil,

Would you mind providing the link to your site and the site password in case it requires a login so that we can check it?

Thank you.

#3

Hi Jade

as you can see, right now the line above the menu items is constantly red except when hovering, I need this to be the exact opposite.

#4

Hi Phil,

If you want the link items not to have a line on it’s normal state, please remove this code:

.x-navbar .desktop .x-nav > li > a, .x-navbar .desktop .x-nav > .x-active > a {
    box-shadow: inset 0 4px 0 0 #f04b26;
    margin-right: 3px;
}

And if you want to change the line color on hover, please use this:

.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 #000 to the color that you want to use.

Hope this helps.

#5

Hi Jade, I removed the code you said to remove and added the other code, but if you check the site again you can see, that there is no line showing when hovering.

#6

Hi Phil,

Did you add the following code on the site? This should add the black hover line for the menu items.

In case you added it on the custom CSS, please check the codes that you currently have and make sure that there is no CSS error.

Let us know how it goes.

#7

OK… I found the mistake. There was a php tag error in there which seemed to collide with this. Thanks for your help!

#8

You are most welcome. :slight_smile:

#9

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