How to change the top navigation button colour on Squarespace 7.1
This tutorial will guide you through the process of changing the colour of the button in the top navigation on your Squarespace 7.1 website. Customising your website’s navigation is essential for maintaining a cohesive and professional visual identity. In this tutorial, we’ll show you how to change the top navigation button colour on your Squarespace 7.1 website using simple CSS. Whether you're highlighting a “Book Now” or “Contact” button in your header, changing its colour can improve visibility and guide user action.
Table of Contents
Why Change the Top Navigation Button Colour?
Brand Consistency: Align the button with your brand colours for a more cohesive look.
Call-to-Action Visibility: A standout button in the navigation bar can increase clicks and user interaction.
User Experience: Making the button visually distinct helps visitors understand where to take action.
Design Enhancement: A customised colour helps elevate the design and make your header look more polished and unique.
Complexity: Easy
Step-by-Step Instructions
Step 1: Use this code below.
.header-actions .btn { color: #fff !important; border-color: #203152 !important; background-color: #203152 !important; }
Step 2: From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code below.
You can then adjust the colour, border-colour and background-colour values to your liking.
Key Takeaways
You can fully control the colour and hover state of your top navigation buttons using CSS.
Highlighting CTA buttons in your nav bar helps drive conversions.
Changes apply site-wide if using standard header layout – no need to manually edit multiple pages.
Ensure contrast for accessibility: light buttons on dark backgrounds and vice versa.
Use the hover state to reinforce interactivity.
FAQs
Can I use different colours on different pages?
Yes, but you'll need to use page-specific CSS selectors. Each page has a unique Collection ID.
Will this work on mobile view?
Yes, but it's good practice to preview your site on mobile to confirm the styling still works well.
Conclusion
Changing the top navigation button colour in Squarespace 7.1 is a quick and effective way to align your website with your brand and improve user interaction.
See other related blog posts below.
