[Support request] How to change this?

[Ravi Dixit]

Here is the screenshot of my website’s primary navigation https://prnt.sc/oijtea

I am on the homepage, so you can see the Home menu is highlighted with a blue box. I want to change this to an Underline.

So when a user on the BLOG page then blog menu should be underlined instead of highlighting with the blue box.

Thanks in advance…

[Leo]

Hi there,

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

Let me know 🙂

[Ravi Dixit]

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…

[Leo]

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.

[Ravi Dixit]

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

[Leo]

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

[Ravi Dixit]

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

Please help with this.

[Ravi Dixit]

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

[Leo]

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

Let me know if this helps 🙂

[Ravi Dixit]

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

[Leo]

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?

[Author]

Posts