Make Dropdown Box Transparent on Squarespace

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 👇

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.

---

📩 Join the inner circle to get exclusive code updates

---

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.

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?