• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Little Lauber Designs

Little Lauber Designs

Sites customized for your small business needs.

  • Home
  • Services
  • Blog
  • Our Work
  • About
  • Contact Us

CSS Hover and Current Menu Items for Custom Menu Links


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!

Filed Under: Development

Footer

  • Email
  • Facebook
  • Instagram
  • LinkedIn
  • Twitter

Who?

John loves WordPress. He works with it every day and wants to help you with your site project(s). John customizes your WordPress experience for you so you can get the most out of your business or personal website.

John: View My Blog Posts
Namecheap.com

Copyright © 2023 * Site by Little Lauber Designs