Jump to content

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

Recommended Posts

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"

Link to comment
  • Replies 6
  • Views 257
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

3 hours ago, NadineS said:

No such website exists? Did you update the URL?

 

No Such Website
The website you requested does not exist.

Hi, I'm BITTU. A website developer with 10 years experience with Squarespace. if you need help and work with me email me here :- mandeepsquarespace@gmail.com

Website:-  dhanjalsolution.com

Best Hourly Rate :- $15 Per Hour

Link to comment

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/

 

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.