Underlining x apparition/animation effect on hover - Navigation Links - Header

Site URL: https://oriole-oarfish-95cc.squarespace.com/

Hi, 

Using site-wide animation -> With the "flex" animation, I've noticed that the header navigation links get a nice effect : when hovering a link, an underlining effect appears with a slight animation of apparition. 

I would like to use the "Slide" effect (and not the flex animation). How can I please reproduce the same hover effect on my animation links?

Password : clublulu2024

Thanking you very much in advance, 

Lucie 

Hi @LucieGbt1993 To achieve this, you’ll need to use a custom code. Here it is:

1. Navigate to Pages > Website Tools > Custom CSS.
2. Paste the code into the CSS editor.
3. Hit Save and you’re done

/* Navigation link underline animation */
.header-nav-item > a:after {
  content: ''; /* Creates a pseudo-element for the underline */
  width: 0px; /* Initial width of the underline */
  height: 1px; /* Thickness of the underline */
  background: #000; /* Underline color */
  display: block; /* Ensures it behaves like a block element */
  transition: width 0.2s ease; /* Smooth animation for the width change */
}

/* Removes background from active or hovered links */
.header-nav-item > a, .header-nav-folder-item:hover {
  background: none !important; /* Ensures no background is applied */
}

/* Active or hover state for main navigation links */
.header-nav-item--active > a:after, 
.header-nav-item:hover > a:after, 
.header-nav-folder-item:hover > a:after {
  width: 100% !important; /* Expands the underline to the full width of the link */
}

/* Folder item underline animation */
.header-nav-folder-item > a:after {
  content: ''; /* Creates a pseudo-element for folder links */
  width: 0px; /* Initial width of the underline */
  height: 1px; /* Thickness of the underline */
  background: #000; /* Underline color */
  display: block; /* Ensures it behaves like a block element */
  transition: width 0.2s ease; /* Smooth animation for the width change */
}

Hope it helps.

Hi, 

Thanks so much, it worked perfectly. The only remaining problem is that on the secondary navigation menu (dropdown menu navigation links), the underlining effects fits the dropdown menu container and not the actual navigation link. How can this be fixed please? See screenshot attached. 

Thanking you very much for your help, 

Lucie 

Perfect, thank you very much for your help🙏