Add a hover effect to the Squarespace 7.1 navigation

On Squarespace 7.1, the active navigation link is underlined but, unlike Squarespace 7.0 templates, there is no hover effect when a user hovers over any of the non-active links.

Example of a Squarespace 7.1 header

This guide explains how to add an animated hover effect to your Squarespace 7.1 site’s desktop navigation. It uses CSS which means that it can be added to any Squarespace 7.1 site, regardless of which billing plan you are on.

Installing the navigation hover effect

To add this simple animation to your Squarespace 7.1 site:

1. Log on to your site and navigate to Design > Custom CSS.

2. Paste the following into your CSS panel:

/* Navigation underline hover effect  */
/* Squarespace 7.1                    */
/* Copyright Soundfocus Digital Media */ 
/* Further info: https://sf.digital   */
/* Use freely in your Custom CSS      */
/* Do not copy or republish           */

.header-nav-item {
  position: relative;
}

.header-nav-item::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.header-nav-item:not(.header-nav-item--active):hover::before {
  transform: scaleX(1);
}

/* End of navigation hover effect    */

3. Click Save to save the changes.

Changing the colour of the hover effect

The instructions above should add a black 2-pixel underline effect when you hover over one of the navigation items.

The colour of the line is set by the colour code #000 which means black. You can choose a different colour by choosing an alternative colour code. The link should take you to a site that helps you to choose an alternative colour.

Changing the animation direction

By default, the animation will scale from the centre, getting larger on both sides, but this can be changed. In this video, you can see three different options, scaling from the left, scaling from the centre (default) and scaling from the right.

If you would prefer the animation to scale from the left, you can add a line of CSS that describes the transform-origin. This should be added just before the “transition” line, so it looks like this:

  transform-origin: top left;
  transition: transform 0.3s ease;

If you would prefer the animation to scale from the right, you can change the transform-origin from “top left” to “top right” like this:

  transform-origin: top right;
  transition: transform 0.3s ease;