[Resolved] Underline effect on menu hover Width issue

Home Forums Support [Resolved] Underline effect on menu hover Width issue

Home Forums Support Underline effect on menu hover Width issue

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1576461
    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!

    #1576465
    John MacKenzie

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

    thanks

    #1576470
    Leo
    Staff
    Customer Support

    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.

    #1576482
    John MacKenzie

    done thanks!

    #1576489
    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!

    #1576500
    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

    #1576868
    Leo
    Staff
    Customer Support

    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?

    #1583395
    John MacKenzie

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

    #1583611
    Leo
    Staff
    Customer Support

    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.

    #1583615
    John MacKenzie

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

    #1583641
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #1583676
    John MacKenzie

    awesome thanks! that did it.

    J

    #1583695
    Leo
    Staff
    Customer Support
    #1588536
    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

    #1589985
    Leo
    Staff
    Customer Support

    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.

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.