How To Create A Dropdown Menu in Squarespace 7.1

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content

---

About This Tutorial

This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

In this tutorial, we’ll be creating a dropdown menu in Squarespace 7.1

I'll walk you through the step-by-step process of creating a dropdown menu, adding it to your navigation, and then – the fun part – customizing it with a touch of code magic! We'll give it a crisp border, center-align those links for a polished look, and even adjust the menu's position for a seamless flow.

I’ve outlined the instructions below and recorded a video to help you see exactly how to create this in Squarespace.

Squarespace Tutorial

Here are the steps from this tutorial.

1. Under the word Website on the left hand side of your screen , you’ll see the word pages.

2. Go to the Pages panel and click the + icon next to Main Navigation.

3. Under More, select Dropdown.

4. Name your dropdown menu.

5. Drag and drop the pages you want to include in the dropdown menu from the Not Linked section to the dropdown menu.

6. (Optional) Rename an existing page's Navigation Title to better reflect its position within the dropdown menu.

   1. Click on the gear icon to open the individual page settings menu ⚙️

   2. Change the text under Navigation Title

7. (Optional - Customization with Code)

   • Go to Website Tools and select Custom CSS.

   • Add the code below to customize the dropdown. Check out some of the related videos linked below if you want to learn more about customizing your Squarespace website. I’ve got a lot of tutorials that can help you make Squarespace uniquely yours.

---

Code Example

Here are the codes from this tutorial. update any of the values like the border or -120px to make it work for your unique website.

.header-nav-folder-content{
  border: 1px solid #333;
  text-align:left!important;
  margin-right:-120px
}

---

Related Content

📖 Learn Squarespace CSS for FREE → insidethesquare.co/learn

🎨 A free guide to borders (article + tutorial video) → insidethesquare.co/border

📖 Learn how to use Squarespace 7.1 → insidethesquare.co/start

📑 My Squarespace code collection → insidethesquare.co/css

❤️ Support my blog with a donation → buymeacoffee.com/insidethesquare

🙋‍♀️ Have a question? Check out my code troubleshooting tips → insidethesquare.co/code-help