Jump to content

Remove Active Header Link Underline w/ New Update.

Go to solution Solved by Web_Solutions,

Recommended Posts

Hey all,

How can I remove the underline on the active link/page with the new Header update? I've tried my usual CSS go-tos below, but they no longer work. Thanks in advance!

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

//Option Two//
.header-nav-wrapper a {
    background-image: none !important;
}
Link to comment
  • Replies 11
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Use this instead:

/* Remove underline on hover and active page */
.header-nav-item:hover:before, .header-nav-item--active:before{
	display: none !important;
}

 

Edited by Vigasan

If an answer I provide helps you, please mark it as the answer so others can easily access it as well.

I'm a Squarespace Authorized TrainerSquarespace Expert, and Circle Member and I've been helping my clients as well as those here in the forum and in various Squarespace groups with custom coding and support for Squarespace websites. I would love to help you in any way I can.

Squarespace PluginsBook Live Help | Squarespace Video Tutorials | Buy Me a Coffee

Link to comment
7 minutes ago, SitesByShannon said:

Hi, @Vigasan unfortunately that's still not working 😞 

Can you share your website URL?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
1 minute ago, SitesByShannon said:

Yes it's https://cinnamon-cinnamon-weej.squarespace.com/ and the password is: Shannon23

Would you like to remove hover effect also?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
  • Solution
2 minutes ago, SitesByShannon said:

Yes! 

 

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS.

.header-nav-item a {
    background: none !important;
}
.header-nav-item a:after {
    display: none !important;
}

 

Screenshot_235.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
Just now, SitesByShannon said:

Thanks so much @Web_Solutions that worked!

Do you remove the underline on Mobile also?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

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.