Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] How can I Center the underline hover effect on mobile menu

Home Forums Support How can I Center the underline hover effect on mobile menu

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #465419
    Tom

    Hi,
    I’m currently using this code:

    /* nav links underline effect */
    .main-navigation .menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 20px;
        -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 > a:hover::after {
        width: 50%;
    }

    but on the mobile view, the underline is centered, but the text is on the left. Is there a way to move the underline on hover beneath the menu item text?

    Thanks

    #465442
    Leo
    Staff
    Customer Support

    Hi there,

    There is no hover on mobile so I would recommend making the effect desktop only like the suggested code here:
    https://docs.generatepress.com/article/adding-menu-hover-animation/

    Let me know if this helps.

    #465476
    Tom

    that works perfectly.

    Thanks

    #465493
    Leo
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.