How to Make a Transparent Dropdown Menu in Squarespace

Customizing your Squarespace site to match your brand’s aesthetic is easier than you might think. One small tweak that can have a big impact is making your dropdown menu transparent. This gives your site a sleek, modern look and allows your background or design elements to shine through. In this tutorial, I’ll walk you through how to do this using a simple CSS snippet. Let’s dive in!

Table of Contents

→ Video tutorial
→ Step-by-step
→ Full code

Watch the Video

Check out the YouTube video below 👇

Step 1: Access Your Custom CSS Panel

First things first, you'll need to access the Custom CSS panel in your Squarespace site. This is where we’ll paste in the code that will make your dropdown menu transparent.

• Navigate to Pages in your site menu.

• Scroll down to Website Tools and select Custom CSS.

Now that you’re in the CSS panel, we can add the code that will make the magic happen.

Step 2: Add the CSS Code

Once you're in the Custom CSS panel, it’s time to add the code that will make your dropdown menu transparent. Copy and paste the following snippet into the CSS panel:

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

After pasting the code, hit save and your dropdown menu should now be transparent. Easy, right?

Step 3: Optional—Add a Custom Color

If you want to take things a step further, you can also add a custom color to your dropdown menu instead of making it completely transparent. Simply replace transparent with your preferred hex code in the CSS snippet. For example:

.header-nav-folder-content {
  background-color: #fde9c0!important;
}//dropdown menu color

Conclusion

And there you have it—a simple, quick way to make your Squarespace dropdown menu transparent (or add a custom color). Whether you’re going for a clean, minimalist look or a bold, branded style, this CSS trick gives you the flexibility to customize your site’s navigation.

Happy designing!

---

Full Code

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

Hey hey, Marya here 👋🏼

I’m the creative force behind Yangu Web Studio and a top-rated web designer on Squarespace's exclusive Marketplace for experts.

I adapt my skills to diverse industries and businesses globally, of all sizes, specializing in crafting digital solutions tailored to your unique goals. If you want to discuss a potential project, you can drop me a line at marya@yanguweb.studio or vibe with me here. Alternatively, you can schedule a free 15-minute consultation call here.

Back to blog