[Support request] Underline Animation Effect

[Tanner]

Hi,

I’d like to add an underline animation effect to my navigation bar. I used this code:

@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,
    .main-navigation .menu > .menu-item > a:hover::after {
        width: 50%;
    }
}

Couple of things I’m looking to do:

1) Disable the underline for the current page
2) Create a little padding between the text and the underline effect so it isn’t right underneath the text
3) Change the underline color to #23efef
4) Have the effect animate to the width of the page word

Any suggestions are much appreciated. Thank you!

~ Tanner G.

[David]

Hi Tanner

you can try this – adjusting the line to fit the exact word width is tricky with this method, but as you can see i have adjusted the last property width, which you can adjust to find a sweet spot

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

        display: block;
        width: 0;
        height: 2px;

        background-color: #23efef; 
        transition: 0.3s width ease;
    }

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

[Tanner]

I see what you did. Thanks!

[David]

That’s great, glad i could help!

[John]

Hi, I like this very much. I’m looking for a simular option for the sub-menu aswell.

Do you have a solution for this?

Kind regards
John

[Leo]

This post should help:
https://generatepress.com/forums/topic/adding-sub-menu-hover-underline-animation/

[John]

Leo,
Many thanks for your answer. It works. One minor thing: In the menu the current item is underlined, but in the sub-menu it isn’t. Is there a way to have the current choise underlined in the sub-menu aswell?

Kind regards
John

[Leo]

Can you paste your full CSS code here?

[John]

Hi Leo,

Here’s the css
Tanks in advance
John

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

display: block;
width: 0;
height: 3px;

background-color: currentColor;
color: #ffcc00;
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,
.main-navigation .menu .menu-item a:hover::after {
width: 80%;
}
}

[Leo]

Try replacing”

.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: 80%;
}

with

.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: 80%;
}

untested 🙂

[John]

Hi Leo,

That solved the problem.

Many thanks

Kind regards
John

[Leo]

No problem 🙂

[Author]

Posts