Animating link underlines for main menu

It works great on pc thanks !!
But on mobile the line is on top of the menu title and not under...
How can I correct this ?

Thanks !!

Hi there,

Try making it desktop only:

@media (min-width:769px) {
    .main-navigation .menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 15px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);

        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 > a:hover::after {
        width: 50%;
     }
}

Works perfect ! thanks again !!

No problem!

Wow, this is exactly what I was looking for! Thank you, Luiz!

It works really well but on menu items that include a drop-down cursor, the underline is centred and underlines the cursor as well. Would there be a way just to underline the text?

Thank you!

Any chance you can link me to the page where it's happening?

Thanks! :)

Hi Tom,

My site isn't live yet. Is there a way for me to share it with you?

Thanks!

You can send it though Account Issue here: https://generatepress.com/contact/

Update question: how to modify the code so that the currently selected menu item stays underlined?

The CSS above should do that by default: https://generatepress.com/forums/topic/animating-link-underlines-for-main-menu/page/2/#post-354636

If it's not, can you link us to your site?

Thanks!

http://innova.uno/wp/

I'm not seeing this part:

.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
    width: 50%;
}

If it's there, can you disable Autoptimize so I can take a look?

Works! Thx :)

You're welcome :)

Hey, quick question. I know this is an old question, but I was wondering, is there a way to make it to where one of my menu items is not underlined? I have my logo in the center of the nav between menu items, and I'd like that to not be underlined. I know I can add a class to the logo, something like .center-logo.

Thanks for any help.

Best,
James