[Resolved] Underline hover only menus with actual links

[Michael]

When you build a menu, sometimes you add a custom link with a # character so you can hang other menu items off it. Other times menu items that have sub menus, are clickable themselves. Is it feasible to somehow underline only those with a full link when hovering ? Or will I have to create custom menus and move the top menu item to the submenu.

I really hope that makes sense.

My concern is that those items that are top menu items that actually link elsewhere, don’t get clicked, because people may think its just a holding menu link.

[Leo]

Hi there,

Are you only talking about the parent menu items here?

If so can you first add a class like hover-underline to the menu items you want the underline to show?
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

[Michael]

Hi, thanks for the response.

Not really, I am talking about only underlining those with a full url instead of placeholder menu items.

So when you create a menu, typically you’d have

Menu 1
Submenu 1
Submenu 2

Now Menu1 can be a full link, say to an archive of a category, or it could be a placeholder ie, it doesn’t link anywhere. I’d like to be able to underline or highlight only menu items that link somewhere.

The placeholder menus are usually just a custom link with # as the link entry.

[David]

Hi there,

what Leo said is correct – although it may be easier to think it of the other way eg. add a class of no-hover to your custom # links

Then in your CSS you can do: li:not(.no-hover) this will exclude any elements with the no-hover class from the hover styles you have

[Michael]

Genius ! of course, never thought of the not parameter. Plus double negatives always have my head in a spin. Thanks David !

[David]

🙂 Glad to be of help

[Author]

Posts