Site logo

Archived topic

Undeline custom link to a section in menu

7 replies · Started by Raquel on August 19, 2018

Viewing posts 1–8 of 8

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.

It Works! Thanks Tom!

You're welcome :)

This archived topic is closed to new replies.