Archived topic
Color and Hover handling of menu items with absolute path
9 replies · Started by Jörg Zeidler on February 28, 2022
Hello team,
we have created our own page based on the "Solo" library template. For our application we have to switch the menu items from relative paths to absolute paths. Example would be: "#bio" -> "/#bio". In this case, the link still works, but the color scheme and the hover effect are switched off or changed in the menu item afterwards. I can also see this behavior in the original "Solo" template. Do you have an idea how I can make the color and hover behavior the same again?
Best regards,
Joerg
Hi there,
in Customizer > Colors > Primary Nav ---> Current Menu item color - you need to set that to standard text color.
Hi David,
thank you for your fast response. Yes you are right, after updating the "Navigation Text Current" in "Appearance/Elements" and in "Appearance/Customize/Colors/PrimaryNavigation/Navigation Text(Choose Current Color)",the initial menu color are now like the relative path items. But still not working is the hover effekt....
Can you share a a link to the site so i can take a look at the issue ?
yes of course. https://estico.de/
the bio item used the absolute path handling.
Try adding this CSS:
.main-navigation .main-nav ul li[class*="current-menu-"]:hover > a {
color: var(--accent) !important;
}cool, this fixes the hover part of the menu in case the sticky menu is active. Unfortunately the elements part of the global header not changed. Is there a additional css fix needed? see: https://estico.de
Made a change to my CSS above ie. added !important
Perfect, that's the solution. A big thank you from your quick support. In just an hour you have fixed this problem. 2 thumbs up!!!
Glad to be of help :)
