How to Change the Font Size of Dropdown Menu Items in Squarespace 7.1

Jun 25

If you're using Squarespace 7.1 and want to fine-tune your website's navigation experience, one overlooked detail is the font size of dropdown menu items (i.e., submenu links inside navigation folders). By default, Squarespace doesn’t offer a direct setting to customize this, but with a simple bit of custom CSS, you can take full control.

Why This Matters

Dropdown menus are often used to organize additional pages under a parent category. But when these submenu items appear too large or too small, they can feel visually disconnected from the rest of your site's design.

Adjusting the font size of these items:

Enhances readability
Improves navigation UX
Created via a visual hierarchy
Keeps your design consistent on desktop and mobile

Why Can't I Change It from Site Styles?

There is no ID for the navigation leveraging Squarespace 7.1. The navigation links are generally classed the same (.header-nav-item). That means the style settings for the main nav links are shared with the submenu items, and there’s no native way to style the submenu items separately.

The Solution? Custom CSS would target only the dropdown content.

Step-by-Step: How to Change Dropdown Menu Font Size

Step 1: Open the Custom CSS Panel

Go to:
Pages → Custom code → Custom CSS

Step 2: Add This CSS Code


/* Change Dropdown Menu Item Font Size */
.header-nav-folder-content .header-nav-item {
  font-size: 16px !important; /* Change to your desired size */
}
/* Optional: Add spacing to the dropdown */
.header-nav-folder-content {
  padding-top: 10px;
  padding-bottom: 10px;
}

Step 3: Save and Preview

After pasting, click Save, then refresh your site to see the updated font size in your dropdown menus.

How It Works

.header-nav-folder-content: Targets only the dropdown container
.header-nav-item within it: Targets only the submenu links, not the main menu

This way, your main navigation links remain unchanged, while the dropdown items get customized to your liking.

Bonus Customizations

Bold Dropdown Menu Text


.header-nav-folder-content .header-nav-item {
  font-weight: 600;
}

✔ Add Hover Color


.header-nav-folder-content .header-nav-item:hover {
  color: #ff6600; /* Use your brand’s accent color */
}

✔ Customize for Mobile Only


@media screen and (max-width: 767px) {
  .header-nav-folder-content .header-nav-item {
    font-size: 14px;
  }
}

This ensures a slightly smaller, mobile-optimized font size for dropdowns on phones.

Final Recap

  
      Step
      Action
    
      1
      Open Design → Custom CSS
    
      2
      Paste the provided CSS
    
      3
      Adjust font-size to your desired value (e.g., 14px, 16px, 18px)
    
      4
      Save and refresh your site

Result

With just a few small changes, you have a clearer, more accessible dropdown menu that thematically aligns with the pattern of your site, but doesn't interfere with the primary links.

Frequently Asked Questions (FAQ)

1. Can I change the font size of dropdown menu items directly from Squarespace Site Styles?

No. There are no independent controls for submenu items in Squarespace 7.1's Site Styles. Base styling is the same for both menu and dropdown links. Custom CSS is needed to select the dropdown items only.

2. What CSS class targets dropdown menu items only?

You can use this:


.header-nav-folder-content .header-nav-item

This specifically targets links inside dropdown folders, not the main navigation items.

3. Will this CSS affect my main menu links too?

No. The provided CSS only affects submenu links that appear inside navigation folders. Your primary navigation items will retain their original styling.

4. What font size should I use for mobile vs desktop?

Here’s a general guideline:

Desktop: 16px – 18px for better readability
Mobile: 13px – 15px for a clean fit on smaller screens
Use media queries to apply different sizes based on screen width:


@media screen and (max-width: 767px) {
  .header-nav-folder-content .header-nav-item {
    font-size: 14px;
  }
}

5. Can I also change the font weight and color of the dropdown items?

Yes! You can customize font weight and hover color like this:


.header-nav-folder-content .header-nav-item {
  font-weight: 600;
}
.header-nav-folder-content .header-nav-item:hover {
  color: #ff6600;
}

This allows you to bold the text and use your brand color for interactivity.

6. How can I test the dropdown CSS changes?

Copy and paste the CSS into Design → Custom CSS, click Save, refresh your site, and hover over your navigation folders to see if the font size and styles change.

7. Will these changes apply to every navigation folder on my site?

Yes. This CSS applies to all the submenu items that are located in all the folders on all the pages or layouts. If you do need folder-specific styles, you would need to have a distinguishing page-specific body class for your selectors.