Remove Menu Underlines and Change Color Instead on Squarespace 7.1

Squarespace 7.1 currently underlines links in the main menu when it’s active. Here’s how you can disable the underline (and change the menu item color if you want).

Table of Contents

Step 1 - Stop the Default Underlines

Copy and paste the following CSS into DESIGN → CUSTOM CSS

/* Remove Navigation Link Underline */
.header-nav-item--active a{
  background: unset !important;
}

Step 2 - Change the Menu Item Color When on That Specific Page

Copy and paste the following CSS into DESIGN → CUSTOM CSS

/* Change the color as needed to match your branding */
:not(.header-nav-item--folder).header-nav-item--active a, .header-nav-folder-item--active > a {
    color: #ff7d00 !important;
}

Step 3 - Change the Folder Color if Folder Item is Active

Here’s the code to make your folder title change color when a page inside the folder is what people are viewing.

Copy and paste the following CSS into DESIGN → CUSTOM CSS

/* Change the color as needed to match your branding */
.header-nav-item--active .header-nav-folder-title{
    color: #ff7d00 !important;
}