[Resolved] Navigation Menu Underline from left to right

[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

[Tom]

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.

[Kevin]

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

[David]

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

[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%;
    }
}

[David]

Thanks for sharing

[Author]

Posts