Archived topic
custom links navigation menu - under line on hover not working
7 replies · Started by Tony on May 18, 2021
hi,
i'm creating a one page website with anchor links and smooth scroll.
when i created a new menu with custom links so it jumps to different sections on the page i.e about me, contact etc....the below css code which was previously working, now only shows all customs links/main menu items (home, about me etc) all underlined instead of underline on hover like it used to...
.main-navigation .menu > .menu-item > a::after {
content: "";
position: absolute;
right: 0;
left: 50%;
bottom: 15px;
-webkit-transform: translate3d(-50%,0,0);
transform: translate3d(-50%,0,0);
display: block;
width: 0;
height: 2px;
background-color: currentColor;
transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
width: 50%;
}
can you help change the css code so it fits with the custom links please?
Hi there,
yeah thats because WP adds the current-menu-* classes to ALL menu links that are on the current page.
The best solution to that issue requires a plugin:
https://en-gb.wordpress.org/plugins/page-scroll-to-id/
The plugin uses JS to track the current visible link to update the menu items. You won't need the GP smooth scroll feature either.
hi David,
wouldn't the plug-in slow down the website? i'm a speed junky and i don't want the plug in to cause any speed issue...
any other way of sorting this out without any plugin?
quick update David,
just tried the plugin, but the menu items remain underlined, instead of the underline appearing on hover.
Its going to load some JS - how much of an impact that has on performance ? I cannot say - but its a very well coded plugin.
Alternatives - would be custom development which would require the same kind of JS that plugin uses.
The plugin has other benefits such as it will highlight the current menu that is scrolled into view - not just when the user clicks the link.
hi david,
the plug in is fine, however, the below code malfunctions...all menu items are underlined instead of on hover. as soon as custom links are involved, the below code doesn't work. i remove the custom links and code is working again on hover...
.main-navigation .menu > .menu-item > a::after {
content: “”;
position: absolute;
right: 0;
left: 50%;
bottom: 15px;
-webkit-transform: translate3d(-50%,0,0);
transform: translate3d(-50%,0,0);
display: block;
width: 0;
height: 2px;
background-color: currentColor;
transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
width: 50%;
}
david,
i fixed the issue with the plugin - on the custom link URL i had put in the full url with the #about section eg. but then i removed the url and just put in "#about" that seems to have done the trick...the above code seems to be working now...thanks so much for your help.
Glad to hear you found the fix !
