about Menu Hover Animation

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.

hello

i replace it.

please check it.

thanks.

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);

ok now.

thanks.

You're welcome

Hello David,

Now the animation is above the menu text.

how to let the annimation is under menu text.

thanks.

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

thank you David,ok now.

Glad to hear that