How to Make the Dropdown (Folder) Menu Transparent in Squarespace 7.1
In Squarespace 7.1, Dropdown (with folders) menus will have a solid background color by default. This is great for most layout designs, but can feel visually too heavy in a modern design when you have transparent/overlay headers.
Squarespace does not have a built-in feature that allows you to control the dropdown’s opacity. It turns out the whole thing can be accomplished cleanly and professionally with one single line of custom CSS.
The Correct & Sufficient Solution
For most Squarespace 7.1 sites, this code alone is enough:
Go to Website → Pages → Custom Code → Custom CSS and add the following:
.header-nav-folder-content {
background-color: transparent !important;
}
Why this works
.header-nav-folder-content is the correct selector for Squarespace 7.1 dropdown (folder) menus
background-color: transparent removes the solid background
!important correctly overrides Squarespace’s system styles
No JavaScript is required
No extra CSS is mandatory
✅ This is a clean, minimal, and professional solution.
If your dropdown already looks good and readable after applying this, you don’t need anything else.
When You Might Need a Small Adjustment (Optional)
In some cases, Squarespace applies a shadow or border that still makes the dropdown feel boxed.
If that happens, this optional addition is the correct and safe enhancement:
.header-nav-folder-content {
background-color: transparent !important;
box-shadow: none !important;
}
This simply removes the shadow — nothing more.
Text Visibility (Only If Needed)
If your dropdown sits over images or video and the text becomes hard to read, you may adjust text color:
.header-nav-folder-content a {
color: green !important;
}
⚠️ This is not required unless readability is an issue.
Mobile Consideration (Optional but Safe)
If full transparency causes readability issues on mobile, use a mobile-only fallback:
@media only screen and (max-width: 767px) {
.header-nav-folder-content a {
background-color: rgba(0, 0, 0, 0.85) !important;
}
}
Again — only use this if mobile clarity is affected.
Final Thoughts
Your own solution is the technically correct, minimal and professional one:
Most of the time, that is literally all that’s needed to make your dropdown menu transparent in Squarespace 7.1.
If it doesn't serve a visual or usability purpose, don't add any more code than you have to.
Less CSS is always better than bloated CSS.
FAQ: Transparent Dropdown Menus in Squarespace 7.1
-
Yes. .header-nav-folder-content is the correct Squarespace 7.1 selector.
-
No. CSS alone is sufficient.
-
No. It targets only the dropdown (folder) menu.
-
Yes, because Squarespace applies system-level styles.
-
Yes. This is a platform-safe, best-practice solution.
