Jump to content

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

Recommended Posts

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

Edited by PatrickC
Active page
Link to comment
  • 11 months later...
  • Replies 13
  • Views 2.9k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

image.png.c4d67a76219da993e1b27ad3f3c25ccf.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 2 months later...
58 minutes ago, pinoff002 said:

Hey! Code available for this using 7.1? Thanks! 

Pls show your site url 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 3 weeks later...
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;
}

image.png.c4d67a76219da993e1b27ad3f3c25ccf.png

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?

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

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

A brand designer & strategist creating brands that bridge the gaps between artistry, strategy, and thoughtful consideration. Creator of Studio Founded, a digital resource library for purposeful business owners. 
💻 Shop Squarespace Templates
✍️ Curated Business Resources

🥰 Complimentary Downloadables
🤍 Bespoke Branding & Websites

Links in my posts may be affiliate links.

Link to comment

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

A brand designer & strategist creating brands that bridge the gaps between artistry, strategy, and thoughtful consideration. Creator of Studio Founded, a digital resource library for purposeful business owners. 
💻 Shop Squarespace Templates
✍️ Curated Business Resources

🥰 Complimentary Downloadables
🤍 Bespoke Branding & Websites

Links in my posts may be affiliate links.

Link to comment
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%;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.