Squarespace Dropdown Menus

HAIDER
13 Dec, 2025

Squarespace Dropdown Menus

If you’re looking to polish and redesign your Squarespace website menu that truly stand out, then this blog post is for you. By default, you can stylize your Squarespace folders according to your main navigation —same colors, same alignment—but with a bit of CSS, you can transform their look. I will guide you how to customize your dropdown folder using custom CSS.

  • Change the background and link colors
  • Adjust alignment
  • Add borders and box shadows
  • Create clickable, animated hover effects
How to Customize Squarespace Dropdown Menu


Why Customize the Drop-Down Folder?

The dropdown folder in Squarespace is used to organize pages and provide better navigation. Sometimes, it does not have colors and look according to your brand’s personality or UX design. Therefore, it requires custom design, which help you:

  • Enhance visual appeal
  • Improve user experience
  • Make your site stand out


How make a Dropdown Menu in Squarespace?

  • Go to Pages in your Squarespace dashboard.
  • In front of Main Navigation, click the plus sign (+) and select Drop Down. Give it a Name according to your choice.
  • Now Drag and drop pages into the folder, or click the plus to add new sub-pages.
How make a Dropdown Menu in Squarespace


Squarespace Dropdown Menu Style

  • Here I will explain you, how to add background and links color
  • Go to Pages, scroll down and on left side go to Custom Code  > Custom CSS (or use the search bar / and type “CSS”).
  • Paste the custom code given below to change the Drop-Down Background.
Squarespace Dropdown Menu Style


CSS To Change the Background Color of SQSP Dropdown-Menu

.header-nav-folder-content {

  background: #FF0000 !important;

  border: 1px solid #333 !important;

  box-shadow: 0 5px 20px rgba(0,0,0,0.15);

  text-align: center !important;

  transform: translateX(15px);

}

 CSS to Customize Folder Link Colors:

.header-nav-folder-content a {

  color: #FFFF00 !important;

}

CSS to Add a Hover Effect to Links:

.header-nav-folder-content a:hover {

  font-weight: bold;

  text-decoration: underline;

}

Explanation of Above Custom CSS

  • Background, border, and box-shadow:  With the help of above code, you can give your drop-down a distinct and elevated look.
  • Text-align and transform: One can also align links to Center, left or right according to his brand choice.
  • Link color and hover effects: Make navigation intuitive and interactive.

 

After adding above code Save by clicking the Save. It works both on Mobile and Desktop view.

By customizing your Squarespace drop-down folder, you’re not just tweaking the appearance—you’re enhancing your visitors’ experience and making your website truly unique. Whether you’re changing backgrounds, link colors, or adding animated effects, these CSS tweaks are simple but powerful. If you found this blogpost helpful, please give it a like, leave a comment with your questions, or let me know what you’d like to customize next. Most importantly, have fun making your Squarespace website uniquely yours!

Previous Post