[Resolved] Underline effect on menu hover Width issue

[John MacKenzie]

relating to this code

https://docs.generatepress.com/article/adding-menu-hover-animation/

it looks great however the WIDTH of the underline doesnt underline the whole word?

if i adjust the width its still just randomly wider. how can we make it so it JUST underlines the WORD? (it looks even more odd when looking hover that have a drop down since those elements are wider?

Thanks!

[John MacKenzie]

Also on the sticky menu the underline appears lower down and not right under the word.

thanks

[Leo]

Hi there,

Can you provide login and password along with the link?

We cannot get it from the previous topics – they are erased as soon as the topic is marked as resolved for security reasons 🙂

Thanks.

[John MacKenzie]

done thanks!

[John MacKenzie]

also when you are currently ON a child page, if you mouse over the menu and over on the page you are on, the hover effect does not work I think that should still obey the hover effect as if it was not an active page?

thanks!

[John MacKenzie]

one more thing see attached video, there is a legacy ghosting effect sometimes on the line that leaves a little DOT still when the line goes away

[Leo]

Unfortunately I don’t believe there is a way to tweak the CSS so the animation hover effect goes 100% of the menu item text.

If you want the line to be the exact same width as the menu item text, then we would need to go with the underline method without the animation. Does that work for you?

[John MacKenzie]

how do we solve the left over dot that shows up from my Video?

[Leo]

Wow that’s a super strange issue.

Is it only happening to the last 3 menu items?

I’m not able to replicate it in my install.

[John MacKenzie]

no it seems to happen randomly on all of them. hmm odd… any idea where to look to figure that out?

[Leo]

Try modifying your CSS to this:

@media (min-width: 769px) {
    .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;
    }
    .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%;
    }
}

Let me know 🙂

[John MacKenzie]

awesome thanks! that did it.

J

[Leo]

No problem 🙂

[John MacKenzie]

sorry to troll in here but just notice

https://gpsites.co/ shows a blank page in case you want to fix that.

J

[Leo]

Yeah we don’t usually provide the direct URL to the sites as you can view them all here:
https://generatepress.com/site-library/

Will see if we can set up redirection to go to that page though.

[Author]

Posts