CSS code doesn't remove underline from active nav using flex.

I have been on multiple threads on the forum yet I am experiencing an issue where Custom CSS isn't removing the underline from the active nav item. 

This is the code that isn't working, I have seen it suggested everywhere for this specific circumstance and I have tried multiple variations of it:

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

Any help would be greatly appreciated. 

The password to the site is currently "test"

share site url pls.

https://rectangle-icosahedron-6lnz.squarespace.com/

PW: test

I'm having the same issue...

/* NO UNDERLINE LINKS */
header a {
background-image: none !important;
}
footer a {
text-decoration: none !important;
}

https://kimberleemctaggart.squarespace.com/

PW: Editor

On 3/16/2023 at 11:53 AM, adzrozanski said:

https://rectangle-icosahedron-6lnz.squarespace.com/

PW: test

No such website exists? Did you update the URL?

3 hours ago, NadineS said:

No such website exists? Did you update the URL?

Thanks for the tip! I ended up turning animations to "NONE" and coding it in CSS myself to have more control of the easing and motion. 

This is the code I used - works great for my needs:

.header-nav-item {
  display: inline-block;
  position: relative;
}

.header-nav-item::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 4px;
  left: 0;
  background-color: #0000ff;
  transform-origin: bottom right;
  transition: transform 0.4s cubic-bezier(.5,.2,0,1);
}

.header-nav-item:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;}

URL was updated to https://ryz-2023.squarespace.com/