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 👇
Want a framework for designing the perfect homepage?
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.
Once you’re happy with the effect, hit save and you’re all done!
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
