How to Add and Style a Dropdown Menu in Squarespace
If your website's header is getting a bit crowded, adding a dropdown menu can be a great way to keep things clean and organized. Dropdown menus allow you to group related links together, making your navigation more streamlined and user-friendly. In today’s tutorial, I’ll walk you through how to add a dropdown menu to your Squarespace site and show you how to style it using custom CSS to make it look polished.
Watch the video
Check out the YouTube video below. 👇🏼
Why Use Dropdown Menus?
Dropdown menus are perfect for decluttering your site’s navigation bar, especially if you have several pages that belong together. Instead of having a second row of links—which can look messy—dropdowns allow you to create a more structured and visually appealing menu. This is especially handy for websites with lots of content.
Step-by-Step Guide to Adding a Dropdown Menu in Squarespace
Step 1: Add a Dropdown Menu to Your Navigation
First, head over to your site’s main navigation in the Squarespace editor.
Click the plus (+) button next to “Main Navigation” to add a new item. Scroll down to find “Folder” (it’s second from the bottom).
Name the folder based on what the dropdown will contain—for example, you could call it "About" if it’s going to house pages like “Our Story,” “Meet the Team,” and “FAQs.”
Now, drag any relevant pages into this folder. You’ll notice that when you hover over the folder in your navigation bar, the dropdown menu appears.
Step 2: Customize the Menu
By default, the dropdown menu looks pretty plain. To change that, we’ll need to add some custom CSS for styling. But first, let’s go through how to access the custom CSS editor in Squarespace.
Step-by-Step Guide to Styling Your Dropdown Menu
Step 3: Access the Custom CSS Editor
Navigate to the “Website Tools” section in your settings and click on “Custom CSS.” This is where you’ll add the code to style your dropdown menu.
Step 4: Add CSS to Customize the Dropdown Menu
Now, let’s style up your dropdown. You can add a border, round the corners, and even add a shadow to give it some depth. Here’s some basic CSS code you can use to get started:
/* Header Navigation Dropdown Menu */
.header-nav-folder .folder-content {
border: 1px solid #333 !important;
border-radius: 20px !important;
box-shadow: 3px 3px 0px #333 !important;
}
Step 5: Adjust Colors, Padding, and Shadows
You can easily change the border color and button colors by editing the hex codes in the CSS. For example, if you want a darker or lighter shade, just swap the
#333with your desired color code.You can also add padding to create space around the menu items or adjust the shadow values for more or less depth.
CSS Tips for Styling Your Dropdown Menu
Border Radius: A
border-radiusof around 20px will give your menu nice rounded corners. Adjust the value to suit your style.Box Shadow: Adding a
box-shadowgives the menu a subtle, elevated effect, making it look more polished and less flat.Colors: Use hex codes to match the menu to your site’s branding, and don’t forget to test different colors for hover effects, making it clear when users interact with the menu.
Wrapping Up
And there you have it! Adding and styling a dropdown menu on your Squarespace website is easier than it looks. By grouping related links under a dropdown, you can clean up your header navigation and improve the overall user experience on your site. Customizing the dropdown’s appearance with CSS takes things a step further, making your site look sleek and professional.
📨 Join my mailing list to get Squarespace tips & tricks right in your inbox
Your designer
I'm Bryan, a Squarespace web designer and founder of Abound Web Design. I have worked with all types of businesses and organizations from preschools to publishing companies to chiropractic clinics and everything in between. If you want to discuss a potential project, you can email me at bryan@aboundwebdesign or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.
