How to create hover effects for the main menu in Squarespace

This tutorial is specific for the latest version of Squarespace known as 7.1 and won't work for older versions of Squarespace. For more information, visit insidethesquare.co/themes

In this Squarespace tutorial, you’ll learn how to create unique hover effects for the links in main menu of your website.

There are four types of links you can have in your main navigation, and the codes for each one of them are listed below.

Want to change the button in your main menu? Check out this tutorial; it's a little old but the codes will still work for the latest version of Squarespace.

Here are the codes from this tutorial:

Main Links:
.header-nav a:hover

Active Page Link:
.header-nav-item--active a:hover

Folder Title:
.header-nav-folder-title:hover

Link Inside Folder Dropdown:
.header-nav-folder-item a:hover

Change the font color:
color: red!important

Make the text bold:
font-weight: bold

Change the background:
background: yellow