Left – Right Hover Underline

  • anwegner
    August 21, 2025 at 6:57 pm

    I’m working on a subdomain for this website (https://dairylandsports.org/), but using a different theme and builder for various reasons.

    I found other help articles about how to code a hover underline in the primary nav, but I can’t quite get them to work and be similar (identical) to the main site above. Specifically, how do I make the hover underline tighter to the bottom of the nav text and the width aligned to the width of the nav text?

    The test subdomain: https://ds2.anwegner-testing.com/

    Thanks,
    Amanda

  • Alvind
    August 21, 2025 at 8:01 pm

    Hi Amanda,

    Under your Customize > Additional CSS, replace this CSS block:

    /*Menu Styling*/
    .main-navigation .menu>.menu-item>a::after {
        content: "";
        position: absolute;
        left: 0;
        /* Starts the underline from the left */
        bottom: 15px;
        -webkit-transform: translate3d(-40%, 0, 0);
        transform: translate3d(-50%, 0, 0);
        display: block;
        width: 0;
        height: 2px;
        background-color: red;
        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: 100%;
    }

    with this:

    .main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 15px;
    transform: translate3d(-50%, 0, 0);
    display: block;
    width: 0;
    height: 2px;
    background-color: red;
    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: 80%
}
  • anwegner
    August 24, 2025 at 4:29 pm

    Thank you, Alvind! Perfect!

  • Alvind
    August 24, 2025 at 10:35 pm

    You’re welcome!

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