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:

// STRETCH NAVIGATION LINE HOVER

.header-nav-item::after {
  content: '';
  background: #000000;
  height: 2px;
  width: 0;
  display: block;
  margin-top: 1px !important;
  transition: width 1s; //animation speed
  margin: 0 auto;
}

.header-nav-item:hover::after {
  width: 100%;
}

.header-nav-item--active a {
    background-image: none !important;
}

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:

// NAVIGATION LINK HOVER COLOR

header nav a:hover{
color: #7b7b7b!important;
transition: .5s ease-in-out;}

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:

// NAVIGATION LINK HOVER FONT WEIGHT

header nav a:hover{
font-weight: 600;}

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:

// ITALIC NAVIGATION LINK HOVER

header nav a:hover{
font-style: italic;
}

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!