Target header menu border color on hover with custom class

Support
#1

Hi there.

I’m making a membership site, where i have targeted the “not open yet” menu items with custom CSS to make them grey and unclickable. Everything is looking “locked down” except from the blue border on hover. That’s the last thing i need to target with CSS to make it grey like i’ve done with the text. Here’s a video of what i’m talking about:

I want to make the border grey on hover instead of blue on my menus with the class “unclickable”.

Heres my CSS on this class, as it is now:

.unclickable > a:hover {
cursor: default !important;
}

.unclickable .x-anchor-text-primary {
color: rgb(181, 181, 181) !important;
border-color: #f1f2f4 !important;
}

Now i need to change the color of the buttom border when i hover the menu so it looks completely unclickable.

Do you know how i target this with CSS?

Thanks!

#2

Hi @coedam,

Thank you for reaching out to us. I tried to check your site but it requires to login. To change the bottom border color, you can try adding the following code in the Theme Options > CSS:

.unclickable > a:hover {
    box-shadow: 0 4px 0 0 #f1f2f4 !important;
}

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

Hope this helps!

#3

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