Animate bottom border

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author megamenu

    (@megamenu)

    Hi holoholo,

    You can try this under Mega Menu > Menu Themes > Custom Styling:

    @include desktop {
    #{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link:after {
        display: block;
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0%;
        height: 3px;
        background: #000;
        transition: all 0.6s;
    }
    #{$wrap} #{$menu} > li.mega-menu-item:hover > a.mega-menu-link:after,
    #{$wrap} #{$menu} > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link:after {
        width: 100%;
    }
}

    Regards,
    Tom

    Thread Starter holoholo

    (@holoholo)

    Thank you.
    How would I get the underline to be the length of the menu item text? Right now it’s putting the line as the width of the container the menu is in.

    Thanks so much.

    Plugin Author megamenu

    (@megamenu)

    Hi holoholo,

    Please post a link to your site so I can take a look (making sure the CSS is exactly as I provided above with no modifications)

    Regards,
    Tom

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Animate bottom border’ is closed to new replies.