How to Customize the Dropdown Folder Style

global element

Sep 2

Looking for a way to make your Squarespace dropdown menus a little more stylish? In this tutorial, I’ll show you three easy ways to customize dropdown folders with CSS. By changing colors, adding borders and shadows, and creating simple hover effects, you can give your site navigation a polished, unique look.

Watch the video below to follow along, and then grab the codes I’ve included here to use on your own website. Each one is easy to tweak, so you can adjust the colors, alignment, and effects to match your brand.

Pro tip: in the video, I was able to reach my site wide CSS from my pages menu by clicking on custom code at the bottom of the pages menu, and then selecting custom CSS. If that option isn’t available for you, press the / key on your keyboard to open the program search and look for CSS so you can navigate their directly.

CSS Code Breakdown

Below are the key snippets we covered in the tutorial. Copy and paste these into Design > Custom CSS inside your Squarespace site, and adjust the values to create your own dropdown design.

1. Change Background & Link Colors

This first snippet lets you update the dropdown folder’s background color and link color.

/* Dropdown background color */
.header-nav-folder-content {
  background: #f4f4f4 !important;
}

/* Dropdown link color */
.header-nav-folder-content a {
  color: #000000 !important;
}

2. Add Border & Box Shadow

Give your dropdown more depth with a border and a subtle shadow.

.header-nav-folder-content {
  border: 1px solid #333 !important;
  box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

3. Adjust Alignment & Hover Effects

Want the links centered or shifted? Use text alignment and transforms. Then, add a hover style so links feel more interactive.

/* Center the links */
.header-nav-folder-content {
  text-align: center !important;
  transform: translateX(15px);
}

/* Hover effect for links */
.header-nav-folder-content a:hover {
  font-weight: bold;
  text-decoration: underline;
}

💡 Pro Tip: Try small values like translateX(10px) or translateX(-10px) to nudge the dropdown into place.

Wrapping Up

The code below is the full code from the tutorial that combines everything we covered into a few lines of CSS. Don’t forget to experiment with colors, borders, and shadows until the design fits your site’s personality. And most importantly—have fun with your Squarespace website!

/* dropdown design from insidethesquare.co */
.header-nav-folder-content{
  background:#efefef!important;
  border: 1px solid #333;
  box-shadow: 0 5px 20px;
  text-align:center!important;
  transform:translatex(15px)
}
.header-nav-folder-content a{
  color:#000!important
}
.header-nav-folder-content a:hover{
 text-decoration:underline;
 font-weight:bold
}