[Resolved] Undeline custom link to a section in menu

[Raquel]

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%;
    }

}

[Tom]

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!

[Raquel]

Could you try again please!

[Tom]

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.

[Raquel]

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.

[Tom]

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

[Raquel]

It Works! Thanks Tom!

[Tom]

You’re welcome 🙂

[Author]

Posts