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, in your navigation & adding pages to that. menu. 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.
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.
Optional: Rename an existing page's Navigation Title to better reflect its position within the dropdown menu. To do this, click on the gear icon to open the individual page settings menu ⚙️ Change the text under Navigation Title.
Optional: Customize your dropdown with Code
Go to Website Tools and select Custom CSS. Add the code below to customize the dropdown. I've included some related videos below if you want to learn more about customizing your Squarespace website.
Code example:
.header-nav-folder-content{
border: 1px solid #333;
text-align:left!important;
margin-right:-120px
}
Chapters:
00:03 how to reach your pages menu
00:04 how to add the dropdown folder
00:10 naming your dropdown folder
00:15 how to add pages to your folder
00:37 updating a navigation name
01:08 customizing your dropdown folder with code
02:59 review and recap
04:05 where to learn more about Squarespace
Related Content:
📝 Original blog post → insidethesquare.co/squarespac...
📖 Learn how to use Squarespace → insidethesquare.co/start
🧭 Explore 200+ Squarespace video tutorials → insidethesquare.co/tutorials
🖥️ Learn Squarespace CSS for FREE → insidethesquare.co/learn
📑 My Squarespace code collection → insidethesquare.co/css
❤️ Support my channel → buymeacoffee.com/insidethesquare
🙋♀️ Have a question? Check out my troubleshooting tips → insidethesquare.co/code-help
- - -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
26 май 2024
