Mastering Dropdown Menu Customization in Squarespace 7.1

Squarespace 7.1 introduced a streamlined way to build websites, but its "Site Styles" menu can sometimes feel limiting when you want to fine-tune specific elements like navigation dropdowns (folders). By default, the dropdown menu often inherits the colors of your header theme, which may not always provide the contrast or aesthetic your brand requires.

If you are looking to change the background color, text color, or hover effects of your navigation dropdowns, this guide provides the specific Custom CSS solutions needed to achieve a polished, professional look.

---

Why Use Custom CSS for Dropdowns?

While Squarespace allows you to change header colors globally within the Site Styles > Colors panel, these changes often apply to the entire header area. If you want the dropdown folder to have a different background color than the main navigation bar, or if you want a specific hover effect that isn't available in the standard settings, Custom CSS is the most effective tool.

How to Access the CSS Editor

To implement the solutions below:

1. Log in to your Squarespace account and open your site.

2. Navigate to Website > Website Tools > Custom CSS.

3. Paste the code snippets into the editor and click Save.

---

1. Changing the Dropdown Background Color

The "Folder" in Squarespace 7.1 is technically called the .header-nav-folder-content. To change its background color, use the following code:

/* Change Dropdown Background Color */
.header-nav-folder-content {
  background-color: #f4f4f4 !important; /* Replace with your Hex code */
}

2. Customizing Dropdown Link Colors

To ensure your text is readable against your new background color, you may need to adjust the link color specifically for the items inside the folder.

/* Change Dropdown Text Color */
.header-nav-folder-item a {
  color: #333333 !important; /* Replace with your Hex code */
}

3. Adding a Hover Effect

To make your navigation more interactive, you can add a hover state. This changes the color of the text when a user moves their mouse over a specific link.

/* Change Dropdown Text Color on Hover */
.header-nav-folder-item:hover a {
  color: #ff5733 !important; /* Replace with your brand's accent color */
}

4. Adjusting the "Active" Link Color

If you want the link to remain a different color when a user is currently viewing that specific page, use this snippet:

/* Change Color of the Active Page Link in Dropdown */
.header-nav-folder-item--active a {
  color: #ff5733 !important;
}

5. Styling the Folder Container (Borders and Corners)

For a more modern aesthetic, you might want to add a border or round the corners of the dropdown menu.

/* Add Border and Rounded Corners to Dropdown */
.header-nav-folder-content {
  border: 1px solid #000000; /* Adds a thin black border */
  border-radius: 10px; /* Rounds the corners */
  padding: 20px !important; /* Adds extra space inside the folder */
}

---

Important Tips for Squarespace CSS

• The !important Tag: In Squarespace 7.1, the system styles are very specific. Adding !important ensures your custom code overrides the platform's default settings.

• Hex Codes: You can find Hex codes (e.g., #FFFFFF for white) using online color pickers or design tools like Adobe Color or Canva.

• Mobile View: The code above primarily affects the desktop "Folder" view. On mobile, Squarespace uses a full-screen overlay menu. If you need to style the mobile menu, you will need to target .header-menu-nav-folder.

---