[Resolved] Navigation Menu Underline from left to right

Home Forums Support Navigation Menu Underline from left to right

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1312847
    Kevin

    I am using following code for navigation underline

    @media (min-width:769px) {
        /* Menu Hover underline animation */
        .main-navigation .menu > .menu-item.menu-hover > a::after {
            content: "";
            position: absolute;
            right: 15%;
            left: 50%;
            bottom: 15px;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    
            display: block;
            width: 0;
            height: 2px;
    
            background-color: #1a3354;
            transition: 0.3s width ease;
        }
        .main-navigation .menu > .menu-item.menu-hover.current-menu-item:not(.exclude-hover) > a::after,
        .main-navigation .menu > .menu-item.menu-hover > a:hover::after {
            width: 70%;
        }
    }

    How do you change the css so underline goes from left to right and covers 100% of the menu text from left to right?

    I would like it exactly like following

    https://codepen.io/mehi/pen/MyWqPM

    #1313334
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Hard to test without a link to your site, but you could copy their code exactly and add it to our markup:

    .main-navigation .main-nav > ul > li > a {
        position: relative;
    }
    
    .main-navigation .main-nav > ul > li > a:after {
        content: '';
        position: absolute;
        width: 0;
        height: 3px;
        display: block;
        margin-top: 5px;
        right: 0;
        background: #fff;
        transition: width .2s ease;
        -webkit-transition: width .2s ease;
    }
    
    .main-navigation .main-nav > ul > li:hover > a:after,
    .main-navigation .main-nav > ul > li.sfHover > a:after {
        width: 100%;
        left: 0;
    }

    That should give you the same result.

    #1313419
    Kevin

    Tried it but does not work.
    I put a link to the site in original post.

    #1313806
    David
    Staff
    Customer Support

    Can you remove any other CSS related to hover effects on the navigation and we can take a look

    #1315012
    Kevin

    Here are the codes just in case anyone needs it

    @media (min-width:769px) {
        /* Menu Hover underline animation */
        .main-navigation .menu > .menu-item.menu-hover > a::after {
            content: "";
            position: relative;
            right: 15%;
            left: 0%;
            bottom: 15px;
            -webkit-transform: translateX(100%);
            transform: translateX(0%);
    
            display: block;
            width: 0;
            height: 2px;
    
            background-color: #1a3354;
            transition: 0.3s width ease;
        }
        .main-navigation .menu > .menu-item.menu-hover.current-menu-item:not(.exclude-hover) > a::after,
        .main-navigation .menu > .menu-item.menu-hover > a:hover::after {
            width: 90%;
        }
    }
    #1315288
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.