Changing the colour of top navigation link on hover and when active

Your website’s top navigation is one of the first things visitors interact with. By customizing the hover and active states of your top navigation links, you can create a more branded and visually engaging experience. In this tutorial, we’ll walk you through how to change the colour of top navigation links when hovered over and when a link is active—using CSS on Squarespace 7.1.

Table of Contents

• Why Change Link Colours on Hover and Active

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Change Link Colours on Hover and Active?

• Visual Feedback: Users know they’re hovering or clicking something.

• Brand Consistency: Match your brand colours and style.

• User Experience: Highlight the current page the visitor is on.

Complexity: Easy

---

Step-by-Step Instructions

Step 1.

Go to Pages > Custom Code > Custom CSS and add the code below.

/* nav colour hover */
.header-nav-item:hover>a, .header-nav-folder-item:hover a {
  color: #c7001c !important;
}
/* nav active color */
.header-nav-item--active>a, .header-nav-folder-item--active>a, .header-menu-nav-item--active>a .header-menu-nav-item--active {
    color: #1cc700 !important;
}
/* Removes nav underline */
.header-nav-item--active a {
   background-image: none !important;;
}



/* mobile font colors */
.header--menu-open a{color:#c7001c!important}

Change the hex code to the colour you want.

---

Key Takeaways

• Use .header-nav-item a:hover to style hover states.

• Use .active or :active selectors to highlight the current/active page.

• You can combine hover and active styles for a cohesive look.

• Always test on both desktop and mobile for best results.

Frequently Asked Questions

Where do I paste the code?
Go to your Squarespace dashboard Pages > Custom Code > Custom CSS and paste the code there.

What if I want to style different links differently?
You can target links by page slug or use nth-child selectors for more specific control.

My active link colour isn't changing—why?
Ensure you’re using the correct page URL in the href* selector, and check for conflicting styles in your theme or other custom CSS.

---

---

Conclusion

Changing the hover and active colours of your top navigation links is a quick and effective way to elevate your site’s navigation experience. Whether you're enhancing accessibility, aligning with your brand palette, or simply improving user feedback, this tweak goes a long way in enhancing your site's professionalism and usability.

---

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.