How to add a drop down menu in Squarespace
Creating a dropdown menu with Squarespace is quick and easy, and really great for organizing your nav links! Dropdown menus can make your site navigation 10 times easier for your customers. So if you’re looking to streamline your website and keep the customer online for longer, adding drop-down menus to your Squarespace site might be the way to go.
Note: Creating a drop-down menu is almost exactly the same whether you have Squarespace version 7.0 or 7.1!
Creating a Drop-Down Menu
To create a drop-down menu:
Click Pages >
Click ‘+’ next to Primary Navigation to add a page
Choose a Folder
The folder will instigate a drop-down menu
To add existing pages into the folder, just drag and drop the pages from your pages panel.
Or, you can add a link by clicking + (plus) inside the folder, then click “Link”, and linking to one of your pages, an external page or even a blog post category.
Adding Index Pages inside a dropdown menu in Squarespace 7.0
The only difference with Squarespace 7.0 is that some pages are restricted from being dragged into the folder. These are typically index pages (although some Squarespace 7.0 sites do not have index pages so you don’t need to worry). Luckily, there is a workaround.
To include Index pages within your drop-down menu folder:
Drag the main Index Page to Not Linked section within the pages panel
Click the + (plus) icon in your folder to Add a link
Add the page name
Click on the cog icon to open up your link settings and choose Pages, then choose your original Index page from the list of pages.
Dropdown menu behavior across squarespace templates
Drop-down menus behave slightly differently between different templates or versions 7.0 and 7.1.
In Squarespace 7.1
As you hover over the folder, the drop-down will show but you are unable to click on the top text. This can be annoying, because it kind of looks like you can click on the link, but nothing happens, you can only click on what has dropped down.
In Squarespace 7.0
7.0 varies depending on the template used. For example, in Brine, clicking on the top folder link will take you to the first drop-down link. This must be considered while you’re setting up the drop-down menu.
But in other Squarespace 7.0 templates, this may behave differently again, as each template family as different functions in Squarespace 7.0
Designing your Drop-Down Menu
In Squarespace 7.1
You can change the font design by going to:
Design > Site Styles > Fonts
Assign Styles > Site Navigation
Edit the Site Navigation (this will also alter the whole site navigation)
Unfortunately, there is no easy setting to change the background color as the color or the drop down background is pulled from the entire section background color.
But, if you are open to changing the section theme sitewide, you can click:
Design > Site Styles > Colors
Click on the color theme you’re using for the header area to edit it
Scroll down to SITEWIDE
Change the Section Background Color
In Squarespace 7.0:
In version 7.0, you can change the folder color, alongside the text color and font style of the drop-down menu. There is one main panel where you can make all of the changes:
Click Design > Site Styles
Scroll down to Header Primary Navigation and then into Folder Settings
Here, you can change the colors, and your fonts are based on header primary navigation fonts. Changing these settings will make a sitewide change to the header navigation.
So, how will you use drop-down menus within your Squarespace site? Whether you need extra structure around the blog, or just want to make your website easier to navigate, customers will be sure to appreciate the drop-down feature. It’ll make their online experience even better, and could lead to more sales or customers for you!
Loved that post? Check out some more design tips below!
How to create a vertical line in Squarespace (7.0 & 7.1)
How to create a full width Instagram feed in Squarespace 7.1
Creating an “as featured in” logo bar on Squarespace
How to add a button to your header navigation in Squarespace
If you liked this post, Pin it to Pinterest! 👇🏻
