How to change this?

Hi there,

What about something like this?
https://docs.generatepress.com/article/adding-menu-hover-animation/

Let me know :)

It is more than good what I was expecting.

But I don't want to show the colour on hover, only underline animation should be shown.

I tried to change colour from Customize>Colors>Primary Navigation. But didn't work...

Try just this:

@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.current-menu-ancestor > a::after {
        width: 50%;
    }
}

You can change the color by modifying currentColor in the code above.

I already did the same but it is changing the line colour, I don't want to show blue hover colour, It should show the animated underline only. https://prnt.sc/oiqh3o

The blue should be coming from the customizer. It's the background current and background hover.

I know that but can I remove that colour and it should only show line.

Please help with this.

I mean, I only want to show line as Background Current and hover. Don't want to show any colour.

If you remove the color code from the customizer, then it should show as transparent.

Let me know if this helps :)

I did the same already but it is making the menu invisible or white.

That's because your Text Current is set to white as well (so it's white on white).

Have you tried changing that to a different color like black?