Squarespace 7.1 Tutorial - Adding Animation to Your Navigation Menu

Hi guys!  Here is another super fun and easy Squarespace tutorial for you all to try out on your website: how to add animation to your navigation menu.

I’ve seen lots of sites with really great animations - whether it’s underlining the text when hover over a menu item, or highlighting the text itself - so I’m going to teach you how to easily do that on your site today!

Here’s the code below:

create an animated underline when you hover over a menu item

.header-nav-item::after {

  content: '';

  background: #d98e73; //color

  height: 2px; //thickness

  width: 0;

  display: block;

  margin-top: 2px !important;

  transition: width.5s; //animation speed

  margin: 0 auto;

}

.header-nav-item:hover::after {

  width: 100%;

}

.header-nav-item--active a {

    background-image: none !important;

}

Highlight the text with a new color on hover

.header-nav-wrapper a {

  padding: 5px !important;

}

.header-nav-wrapper a {

  padding: 5px !important;

  transition: color .5s !important; 

  transition: background-color .5s !important  ;//animation speed

}

.header-nav-wrapper a:hover {

  background-color: #d98e73 !important;

  color: #ffffff !important;

}

And there you have it - super easy way to spice up your Squarespace website navigation!

Looking for more Squarespace tutorials?  Here are a couple of my favorites:

1. How to Add a Testimonial Slider to Squarespace 7.1 Website

2. How To Make Your Instagram Feed Full Width on Squarespace

Stay tuned for more Squarespace tutorials, and join my email list below to get updates on more tips and tricks!