Navigation animated underline (left to right) on hover and remain for active page. Brine template.

I am trying to make an animated underline on hover. would be nice if the underline remained for the active page. I found this but the underline is miles away from the navigation and does not stay on for the active page..... Anybody have any suggestions? Much appreciated..

.Header-nav-item { position:relative; height: 60px; line-height: 60px; text-align: center; transition: 0.5s; padding: 0 20px; cursor: pointer; -webkit-transition:0.5s;} .Header-nav-item:hover { background-color: transparent; border-color: transparent; color: #000000;} .Header-nav-item:hover:before{ transition-delay: .2s; } .Header-nav-item:before{ width: 0%; height:100%; z-index: 3; content:''; position: absolute; bottom:-1px; left:0; box-sizing: border-box; transition: .2s;} .Header-nav-item:hover:before { width: 100% !important; transition: .7s; } .Header-nav-item:before { border-bottom: 2px solid #000000;}

Your snippet seems worked well, I edit it to match the needs

.Header-nav-item {
    position: relative;
    height: 60px;
    line-height: 60px;
    text-align: center;
    transition: 0.5s;
    padding: 0 20px;
    cursor: pointer;
    -webkit-transition: 0.5s;
}

.Header-nav-item:hover {
    background-color: transparent;
    border-color: transparent;
    color: #000000;
}

.Header-nav-item:hover:before {
    transition-delay: .2s;
}

.Header-nav-item:before {
    width: 0%;
    height: 100%;
    z-index: 3;
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    box-sizing: border-box;
    transition: .2s;
}

.Header-nav-item:hover:before,
.Header-nav-item.Header-nav-item--active:before {
    width: 100% !important;
    transition: .7s;
}

.Header-nav-item:before {
    border-bottom: 2px solid #000000;
}

Hey! Code available for this using 7.1? Thanks! 

58 minutes ago, pinoff002 said:

Hey! Code available for this using 7.1? Thanks! 

Pls show your site url 

2 hours ago, bangank36 said:

Pls show your site url 

https://thisisaspace.com/

On 6/20/2020 at 9:58 AM, bangank36 said:

Your snippet seems worked well, I edit it to match the needs

.Header-nav-item {
    position: relative;
    height: 60px;
    line-height: 60px;
    text-align: center;
    transition: 0.5s;
    padding: 0 20px;
    cursor: pointer;
    -webkit-transition: 0.5s;
}

.Header-nav-item:hover {
    background-color: transparent;
    border-color: transparent;
    color: #000000;
}

.Header-nav-item:hover:before {
    transition-delay: .2s;
}

.Header-nav-item:before {
    width: 0%;
    height: 100%;
    z-index: 3;
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    box-sizing: border-box;
    transition: .2s;
}

.Header-nav-item:hover:before,
.Header-nav-item.Header-nav-item--active:before {
    width: 100% !important;
    transition: .7s;
}

.Header-nav-item:before {
    border-bottom: 2px solid #000000;
}

Hi there! Just wondering where would I insert code if I wanted to change the color of the line animation? So if I wanted it to go from green to blue?

On 9/20/2020 at 5:02 AM, nickleb said:

Hi there! Just wondering where would I insert code if I wanted to change the color of the line animation? So if I wanted it to go from green to blue?

change #000000 in above code

On 9/21/2020 at 7:57 AM, tuanphan said:

change #000000 in above code

thank you. also i noticed this code moves the entire navigation menu down and i can't seem to figure out how to not make that happen. 

Hi! Is this a way to add this code to regular text links in 7.1?

On 11/18/2021 at 7:41 PM, HannahRoseShaw said:

Hi! Is this a way to add this code to regular text links in 7.1?

Can you share link to page where you added a text link? We will try testing the code easier

Yes, you can try it on this site, password demo. https://mackerel-flatworm-m6lh.squarespace.com/ 

On 11/18/2021 at 7:41 PM, HannahRoseShaw said:

Hi! Is this a way to add this code to regular text links in 7.1?

Add to Design > Custom CSS

/* Links underline hover */
.content-wrapper a {
    text-decoration: none;
    position: relative;
}
.content-wrapper a:after {
    content: "";
    height: 1px;
    width: 0;
    position: absolute;
    background-color: black;
    left: 0;
    bottom: 0;
    transitioN: all 0.3s;
}
.content-wrapper a:hover:after {
    transition: all 0.3s;
    width: 100%;
}

Hello, I like to know how I can add a underline animation while hovering and when I click the link the link will stay underlined till I click another link in the site header. Is this possible? Please help. Kind regards, Pascal

On 2/25/2022 at 10:17 PM, DBLPJ said:

Hello, I like to know how I can add a underline animation while hovering and when I click the link the link will stay underlined till I click another link in the site header. Is this possible? Please help. Kind regards, Pascal

What is your site url? We can give tweaked code easier