[Resolved] about Menu Hover Animation

[bruce]

hello,

please see the website:https://oled.baynoe.com/

i added the css copied from this page https://docs.generatepress.com/article/adding-menu-hover-animation/

but still has some issue.

how to let the animation align the menu text .

you can see ,now the animation not align.

thanks.

[Fernando]

Hi Bruce,

It’s not visible currently. Can you first change the color of the background in the code?

Example, replace this line:

background-color: currentColor;

with this:

background-color: #ff0000;

Replace #ff0000 with your preference.

After doing this, let us know what “alignment” you’re going for. Current;y, it’s centered at the top.

[bruce]

hello

i replace it.

please check it.

thanks.

[David]

Hi there,

see this CSS Rule:

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

Change the width: 50%; to: width: calc(100% - 44px);

[bruce]

ok now.

thanks.

[David]

You’re welcome

[bruce]

Hello David,

Now the animation is above the menu text.

how to let the annimation is under menu text.

thanks.

[David]

In this CSS:

.main-navigation .menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 15px;
        -webkit-transform: translate3d(-50%,0,0);
        transform: translate3d(-50%,0,0);
        display: block;
        width: 0;
        height: 2px;
        background-color: currentColor;
        transition: 0.3s width ease;
        top: unset; /* Add this */
    }

Add the top: unset; property i commented above

[bruce]

thank you David,ok now.

[David]

Glad to hear that

[Author]

Posts