Removing Wordpress Sub-header Grey Highlight on Hover
I'm working on a wordpress site that has a theme applied by our university. Most things I've wanted to do I've been able to by using CSS to customize a bit. However, I am having problems getting the menu bar to work the way I want. Essentially I'm using a megamenu that has headers and then subitems within those headers. Wordpress menu does not actually have "headers" that are not links so I essentially created a custom menu item and put # in the item's "link" field. The problem is that this workaround ends up treating the headers as if they are a link and when hovered, the background turns light grey as it does on actual items within the menu.
I've been able to get the headers to have the "default" pointer through css but I have not yet succeeded in getting the grey highlight to stop. I've tried several things including "pointer-events: none" but this ends up applying not only to the header but also the items under the header. Any thoughts? Also, I'm only familir with HTML and CSS.
1 Reply
can you share a link or a codepen of the relevant header/menu? it sounds like you just want to target the hover event just on the heading/title of the submenu. can you give those items a class like '.sub-menu-heading' and remove the styles on hover? or better yet give it an attribute [aria-disabled=true] , style that
a[aria-disabled='true']:hover {background: none;} then in the javascript or a script tag get all of those non-link links:
and e.preventDefault() as you dont want them acting like a link for any users, not just aesthetically of whether they have a hover style. keyboard users would otherwise still be able to tab to it.
i bet someone else will have a better suggestion of how to knock it all out with one attribute though