Underline effect on menu hover Width issue

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

thanks

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.

done thanks!

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!

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

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?

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

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.

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

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

awesome thanks! that did it.

J

No problem :)

sorry to troll in here but just notice

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

J

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.