How to change the navigation underline colour in Squarespace
By default, Squarespace 7.1 adds an underline or hover effect to navigation links in your site header — but it may not always match your brand’s color palette. Fortunately, with a little custom CSS, you can easily change the underline color of your top navigation links to better suit your site's design.
In this tutorial, we’ll walk you through how to customize the underline color on hover or when the link is active.
Table of Contents
Why Change the Navigation Underline Colour?
To match your brand colors and site aesthetic
To improve user interaction and clarity
To add subtle visual interest and polish
To help indicate active or hovered links clearly
Step-by-Step Instructions
Step 1: Go to Pages > Custom Code > Custom CSS and add the code below
/* change the top navigation underline colour */
.header-nav-item--active a {
background-image: linear-gradient(#465e46, #465e46) !important; /* Replace with your brand color */
}
Note: Change the linear-gradient colour1 and colour2 linear-gradient(colour1, colour2) hex code to the desired colour in #d70db3 like this linear-gradient(#d70db3, #d70db3)
Key Takeaways
Squarespace doesn’t offer a visual setting for underline colors — but CSS can do the job.
Customize color.
Update the URL slug to reflect the active page if you're targeting specific items.
FAQs
Will this affect my mobile menu?
No. This CSS targets only the desktop navigation. You’ll need separate CSS for the mobile nav if needed.
Can I remove the underline altogether?
Yes! Use: .header-nav-item--active a {background-image: none !important;}
Q: What if I want different colors for each link?
You can target each nav link individually using their href (URL slug), like: .header-nav a[href*="/about"] { .header-nav-item--active a { background-image: linear-gradient(#d70db3, #d70db3) !important; } }
Conclusion
With just a few lines of CSS, you can completely customize the navigation underline color in Squarespace 7.1. Whether you're going for a minimalist look, bold branding, or subtle elegance, this simple tweak enhances your site's visual appeal and user experience.
If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.
All work in this guide is provided ‘as-is’. Other than as provided this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.
If you require professional advice, you can book our consultation services.
