How to customize the dropdown menu background in Squarespace
This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes
In this tutorial, I am going to show you some creative codes you can use to change the look of your drop-down folder menu.
Pro Tip: Not all Squarespace sites use the same codes!
The drop-down folder goes by different “code names” in different versions of Squarespace.
Make sure you are using the right code below for your site!
If you have no idea what version you are using, read this article on Squarespace theme families first, because it makes a big difference in which codes will work for you!
Tutorial for Squarespace version 7.1
Here is the code to change the background color; be sure to change the background color #00FF00 to the color you want to show up behind your menu links:
.header-nav-folder-content{background-color:#00FF00!important}
Give the drop down a gradient background:
.header-nav-folder-content{background:linear-gradient(to bottom, #fee7ef,#c4e9fa) }
Round the edges of the dropdown:
.header-nav-folder-content{border-radius:15px}
Change the link alignment to the left:
.header-nav-folder-content{text-align:left!important;}
Change the link alignment to the right:
.header-nav-folder-content{text-align:right!important;}
Change the link alignment to the center:
.header-nav-folder-content{text-align:center!important;}
Give your menu a border:
.header-nav-folder-content{border: 1px solid purple}
Add a border between links:
.header-nav-folder-content a {border-bottom:1px solid #333}
Increase the space between links:
.header-nav-folder-content a {padding-bottom:.5rem!important; }
Aaand last but not least, give that fancy little drop down a shadow with this code:
.header-nav-folder-content{box-shadow: 5px 5px 15px rgba(0,0,0,0.25)}
Tutorial for Squarespace version 7 (Brine Theme)
Give the drop down a gradient background:
.Header-nav-folder{background:linear-gradient(to bottom, #fee7ef,#c4e9fa) }
Round the edges of the dropdown:
.Header-nav-folder{border-radius:15px}
Change the link alignment to the left:
.Header-nav-folder{text-align:left!important;}
Change the link alignment to the right:
.Header-nav-folder{text-align:right!important;}
Change the link alignment to the center:
.Header-nav-folder{text-align:center!important;}
Give your menu a border:
.Header-nav-folder{border: 1px solid purple}
Add a border between links:
.Header-nav-folder a {border-bottom:1px solid #333}
Increase the space between links:
.Header-nav-folder a {padding-bottom:.5rem!important; }
And last but not least, give that fancy little drop down a shadow with this code:
.Header-nav-folder{box-shadow: 5px 5px 15px rgba(0,0,0,0.25)}
