CSS Hover and Current Menu Items for Custom Menu Links

Vector Cartoon Confuse Businessman
When I was redesigning my site, I developed an issue with the current menu item on my Portfolio page. It’s an archive page, essentially, and the menu was setup as a custom link that would utilize my archive template. When you do that, the custom link in the menu doesn’t receive the class of “current-menu-item” or “active”. This was driving me crazy and after too many different Google searches, I stumbled upon a solution. While I don’t remember the source, and I apologize to whomever, it was not easy to find using some pretty basic searches, in my opinion. For the future and perhaps for others frustrated with this predicament, I give you the following solution.

It’s a WordPress filter and we’re looking for the specific menu item class name and changing menu-item-#, in the menu class array, to have the 2 additional current-menu-item classes so our hovers and active classes in CSS actually work.

I was using a Genesis theme, but if you’re having this issue with another theme and it’s using a class such as “active”, you’ll need to modify the code accordingly. You could do this for each custom menu link as needed.

In any case, Happy Coding!