How to customize the dropdown menu background in Squarespace

global element

Sep 10

You’ll find a lot of options in your Squarespace design menu, but unfortunately, changing the background color of your dropdown menu isn’t one of them. 🫠 Luckily, a little custom CSS can help you make that dropdown folder unique! Use the code below to create a higher contrast, or even add a linear gradient if you want to be really creative.

Under the code you’ll also find a link to a tutorial video that will teach you some more creative customization tricks for your dropdown. It’s definitely worth watching if you want to be inspired!

/* soliud background color - change the #00FF00 color */
.header-nav-folder-content{
  background-color:#00FF00!important
}

/* linear gradient background */
.header-nav-folder-content{
background:linear-gradient(to bottom, #fee7ef,#c4e9fa)
} 

Important update: Squarespace made changes to the program menu in May 2025. If your menu looks different than the video, press the / key to open the program search and search for Custom CSS to navigate there directly.