Create a highlight animation on your Squarespace navigation

Quick code sample for you today, so you want your Squarespace website to stand out a bit more and give it some personality. A good way can be to add a animation when the user’s mouse hovers over an item in the navigation. See the gif below for this example:

Don’t worry you dont need to understand the code, just simple copy and paste.

On your Squarespace website, open the Design panel and click Custom CSS.

Paste in the code below:

// naviation animation
.header-nav-item {
  position: relative;
  padding: 0 4px;
}
.header-nav-item:after{
  // change this colour to be any colour you want
  background: black;
  content: '';
  z-index: -1;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0%;
  width: 100%;
  transition: 0.4s;
}
.header-nav-item:hover:after {
  height: 100%;
}

You can change the background colour of the square to be any you want, currently set to black but you can use any hex colour.