How to change the colour of the top navigational links on hover
In this tutorial, you will be guided on how to modify the colour of the top navigational links when hovering over them on Squarespace 7.1. The code provided is specifically designed for Squarespace 7.1 version.
Table of Contents
Why Change the Navigation Link Hover Colour?
Adjusting the hover color of navigation links can:
Improve visual feedback for users
Enhance branding with consistent color schemes
Increase accessibility and readability
A subtle hover effect can make a site feel more professional and intuitive.
Complexity: Easy
Step-by-Step Instructions
Step 1: To change colour to the top navigational links on hover, from the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code below:
// Navigation Color // .header-nav-item a:hover { color: #BE887A !important; background-image: none !important; }
Step 2: This code will work site wide.
You can then adjust the colour to your liking.
Key Takeaways
Hover effects create a more engaging and responsive design.
Custom CSS allows you to override default styles not available in the editor.
Use brand colors to maintain consistency and professionalism.
FAQs
Can I change the hover background color too?
Yes! You can add background-color: #yourcolor; within the same hover rule.
Will this affect dropdown navigation items?
No, but you can target them specifically with .header-nav-folder-content a:hover if needed.
What if I want different hover colors for different pages?
You can use page-specific body classes in your CSS to apply different styles per page.
Conclusion
Changing the hover color of your top navigational links in Squarespace 7.1 is a quick but powerful way to refine your site's user interface. With a few lines of CSS, you can tailor your navigation to align perfectly with your site's branding and elevate the user experience.
