[Resolved] Off-Canvas color hover problem

[russel]

If you hover on the off-canvas menu in this link: https://darkfaqs.com/, it will show the red hover color

But not in this one: https://darkfaqs.com/2023/01/12/hello-world-3/

I can’t figure it out, please help.

[David]

Hi there,

its because the menu item is a parent item for that post eg. a post within the same category.
by default WP will give the menu item a current-menu-* class because of that relantionship, which attracts the current menu item styles.

If you want a current menu item to have a hover style add this CSS:

.slideout-navigation.main-navigation .main-nav ul li[class*="current-menu-"]:hover > a {
    color: #f00;
}

[russel]

Thank you.

While you’re at it, is it possible to add an underline while on hover as well?

[David]

Here you go:

.slideout-navigation.main-navigation .main-nav ul li:hover > a {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 3px;
    text-decoration-color: #000;
}

I included the other properties for you to play with

[russel]

Great! Thank you! 🙂

[David]

You’re welcome

[Author]

Posts