4 navigation link hover effects for your Squarespace 7.1 website
Pin to save for later
When it comes to web design, the little details make a big difference. One of those details is how navigation links respond when a user hovers over them. Thoughtfully designed hover effects can add a touch of interactivity, create a more engaging user experience, and subtly guide visitors through your website.
If you're building or customizing your site in Squarespace 7.1, you might be looking for creative ways to make your navigation stand out. In this post, we’ll show you four eye-catching and easy-to-implement hover effects for your navigation links that will elevate your site’s design and keep your audience engaged.
Option 01:
Stretch out underline on hover
1. From your Squarespace dashboard, go to:
Pages > Scroll down to Website Tools > Custom CSS
2. Copy & paste the CSS in the box below:
Important Notes:
For the thicker border stroke around the image: update 2px to a larger number (Example: 4px)
To change the border color: update #000000 to HEX code of choice
Option 02:
Change navigation link color on hover
1. From your Squarespace dashboard, go to:
Pages > Scroll down to Website Tools > Custom CSS
2. Copy & paste the CSS in the box below:
Important Notes:
To change the border color: update #7b7b7b to HEX code of choice
Option 03:
Change navigation link font weight on hover
1. From your Squarespace dashboard, go to:
Pages > Scroll down to Website Tools > Custom CSS
2. Copy & paste the CSS in the box below:
Option 04:
Italicize navigation link font on hover
1. From your Squarespace dashboard, go to:
Pages > Scroll down to Website Tools > Custom CSS
2. Copy & paste the CSS in the box below:
All set!
Use discount code STYLEDSQUARE10 to save 10% off your Squarespace Subscription!
* Disclaimer: This post contains affiliate links. We may earn a commission should you chose to sign up for Squarespace using our link. Affiliate links are a great way to show your support for our content with no additional cost to you!