Archived topic
Underline hover only menus with actual links
5 replies · Started by Michael on August 29, 2020
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.
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
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.
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
Genius ! of course, never thought of the not parameter. Plus double negatives always have my head in a spin. Thanks David !
:) Glad to be of help
