Make Dropdown Box Transparent on Squarespace

May 6

One common request I get from clients when building their Squarespace websites is to make the dropdown box from the main menu transparent.

While I don’t personally think this looks great, plenty of clients would rather have a transparent background for their dropdowns rather than a block of color.

If it’s what a client wants then so be it, and this is how I do it.

Watch the video

Check out the YouTube video below 👇

Six Figure Design Club framework for designing a perfect homepage — *Want a framework for designing the perfect homepage?*

Access now

Head to Pages > Website Tools > Custom CSS and to make your dropdown box transparent you’ll need to add some custom code.

In your custom CSS box add the following lines of code:

.header-nav-folder-content {
background-color: transparent !important;
}

This tells Squarespace that you’re targeting the folder navigation content, e.g. the dropdown box, and that you want it to be transparent.

This will change your dropdown box to transparent. If you’d rather make it a color instead, simply change transparent in the code for your color or hex code of choice.

And that’s it. Super simple with just a few lines of custom code and whilst it may not be a design style I love, that’s how you make a dropdown box transparent on Squarespace.