Animated Underline

7 hours ago, AA95 said:

I texted you on Instagram 🙏🏻 

I didn’t get the notification. Sorry.

12 minutes ago, inunzi said:

I didn’t get the notification. Sorry.

It doesn’t seem that you dmed me. Can you try again? Thanks !

2 hours ago, Kailron said:

hi, i just used this code snipped for my own site, works almost perfectly except sometimes when my cursor leaves the navigation link, as the line shrinks it doesnt shink all the way to the end, there is a tiny dot that remains and it disappears only after some time when I hover other links back and forth. Any idea how to fix it? My current cite is gallerymilmar.com, the "publications" link currently experiences that black dot issue most of the time.

I see fine here. Did you solve?

Hey guys, can anyone here tell me how to make this underline animation go from right to left. 

SquareSpace 7.1

www.parkbrewing.company

PW: password

Thank you,

On 10/3/2020 at 10:47 PM, inunzi said:

I tested this code on my site, and it doesn't show a line under the social icons on desktop nor on mobile. You can also customize the transition speed, the thickness of the line, and I think you can also change the color of the line too. Copy and paste the code below in the custom css section, located the the design page. 

// Stretchy Navigation Line - v2 //

.header-nav-item::after {
  content: '';
  background: #000000; //color
  height: 2px; //thickness
  width: 0;
  display: block;
  margin-top: 2px !important;
  transition: width 1s; //animation speed
  margin: 0 auto;
}

.header-nav-item:hover::after {
  width: 100%;
}

.header-nav-item--active a {
    background-image: none !important;
}

This works great on my site for the header nav. But How do you do this to the footer and all the other links? Can someone help with this please?

15 hours ago, Nir said:

Hi all, resurrecting this thread :) 

The animated underline doesn't work on a navigation link that has a dropdown, also it makes it so the dropdown doesn't drop. Wondering if anyone knows what I can add to the code to make sure it works for links with drop-down menus? 

site is: https://cod-cobalt-29w6.squarespace.com/

pw: quiet

 

Which code did you use?

Hi @tuanphan (or any others), please could you advise on how to adapt the following code so that it applies to text links and so that the underline only animates under the linked text, not under the whole block? Do I need to change 'display: block;' to something else?

Would be super grateful for a solution!

#page a::after {
  content: '';
  background: #5050a0; //color
  display: block;
  height: 10px; //thickness
  width: 0;
  margin-top: 2px !important;
  transition: width 0.5s; //animation speed
  margin: 20 auto;
}

#page a:hover::after {
  width: 100%;
}

#page a a {
    background-image: none !important;
}

On 11/19/2021 at 12:05 AM, thomaswbarnett said:

Hi @tuanphan (or any others), please could you advise on how to adapt the following code so that it applies to text links and so that the underline only animates under the linked text, not under the whole block? Do I need to change 'display: block;' to something else?

Would be super grateful for a solution!

#page a::after {
  content: '';
  background: #5050a0; //color
  display: block;
  height: 10px; //thickness
  width: 0;
  margin-top: 2px !important;
  transition: width 0.5s; //animation speed
  margin: 20 auto;
}

#page a:hover::after {
  width: 100%;
}

#page a a {
    background-image: none !important;
}

Can you share site url?