Archived topic
Undeline custom link to a section in menu
7 replies · Started by Raquel on August 19, 2018
Hello! I have a problem, i have a custom link in my menu and I add a underline effect for the current page but the effect its not working with the custom link because the section is the same as a page option menu so both appear underline. Could you help me?
My effect underline code is
/*Underline menu effect*/
@media (min-width: 769px) {
.main-navigation .menu a:after {
content: "";
position: absolute;
right: 0;
left: 50%;
bottom: 10px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
width: 0;
height: 3px;
background-color:
#9DCB3B;
transition: 0.3s width ease;
}
.main-navigation .menu .current-menu-item a:after,
.main-navigation .menu .current-menu-item a::after,
.main-navigation .menu .current-menu-item a:hover::after {
width: 50%;
}
.main-navigation .menu a:hover::after {
width: 50%;
}
}
Hi there,
Your site has a coming soon page up. Any chance you can send us access?: https://generatepress.com/contact
Just be sure to mention this topic :)
Thanks!
Could you try again please!
You can remove the underline from the second menu item like this:
.main-navigation .menu .menu-item-348:not(:hover) a:after {
opacity: 0;
}
However, this will make it so it doesn't underline even when you click on it to go to that section.
If you need to do that, you can use a plugin like this: https://wordpress.org/plugins/page-scroll-to-id/
That plugin should give you an option to add a class to active anchor links. If you set that up and let me know, I can adjust the CSS above to work with that class.
Is there a way to make "display: none;" just if im on the link same page? I dont know maybe with a condition with just one underline option menu at a time. I want it to keep it working when I do hover action on custom link.
Tnks for your help.
I just adjusted the code above - can you give it another shot?: https://generatepress.com/forums/topic/undeline-custom-link-to-a-section-in-menu/#post-654635
It Works! Thanks Tom!
You're welcome :)