[Resolved] While on article page, parent category menu item not highlighted

[Justin]

Hello,

I have the primary menu set up as follows:

Assume the Main menu option is Cars

Under Cars, we would have Sedans and All cars

Sedans is a one-time post we want to link to

All cars is a category with all posts about cars/sedans

Problem: While on the sedans post, the menu item for All cars will not highlight when you hover over it.

Is this normal WordPress behavior? Is there a possible fix?

[Tom]

So the hover color isn’t working for that menu item?

This happens when the menu item is set to current. The current menu item has no hover.

Of course, you can overwrite this with CSS:

.main-navigation .main-nav ul .current-menu-item > a:hover {
    background: red;
    color: #FFFFFF;
}

.main-navigation .main-nav ul ul .current-menu-item > a:hover,
.main-navigation .main-nav ul ul .current-menu-parent > a:hover {
    background: red;
    color: #FFFFFF;
}

[Justin]

Correct – the hover color isn’t working on the sub-menu items when on that item’s page. Same thing when hovering over that sub-menu item’s category page which is also an item in the menu.

I’m not sure that CSS code worked for me. Is that intended to create a background hover color for sub-menu items in the primary menu?

[Tom]

It should make it so the item hovers to that color regardless of where it is as long as it’s a current menu item.

Can you link me to the page with that CSS added?

[Justin]

When on this page:
http://thegreencarguy.com/plug-in-vehicle-charging-need-know/

Try hovering over Fuels > all articles

[Tom]

I just adjusted the CSS above to include CSS for the sub-menu as well.

[Justin]

Thanks Tom. That seems to highlight the sub-menu item for that article’s link, but it’s still not highlighting the last link in that sub menu for all articles about charging.

[Tom]

I’m not seeing the second piece of CSS I added above added?

[Justin]

I have the below CSS added in both appearance > simple css and under simple css for the specific post.

.main-navigation .main-nav ul .current-menu-item > a:hover {
background: red;
color: #FFFFFF;
}

.main-navigation .main-nav ul ul .current-menu-item > a:hover {
background: red;
color: #FFFFFF;
}

[Tom]

Just made another adjustment to the CSS.

Let me know 🙂

[Justin]

Thank you, Tom! That works perfectly. You’re the best.

[Tom]

You’re welcome! 🙂

[Author]

Posts