Add Hover Animation to Header Links on Squarespace Website

To get a true hover effect in your Squarespace header you need to have Flex Animation installed.

I’m not the biggest fan of Flex Animation however which means I usually tend to add some custom code to create a true hover animation to header links instead.

Keep reading for all the details.

Watch the video

Check out the YouTube video below 👇

To add hover animation to header links on your Squarespace website open Google Chrome Developer Tools by hitting Shift + Command + C on a Mac and copy the ID for the header link you want to target.

Then head to Pages > Website Tools > Custom CSS and paste the ID into your custom CSS box.

You then need to add the following code:

.header-nav-item a {

transition: 0.2s !important;

&:hover {

opacity: 0.2 !important;

transition: 0.2s !important;

}

}

You can play around with the transition and opacity speed to get the effect you want.

---

📩 Join the inner circle to get exclusive code updates

---

Once you’re happy with the effect, hit save and you’re all done!

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?