How to Add a Mega Menu in Squarespace: A Step-by-Step Guide
Got a lot of products to sell on your website, or a complex and deep navigation structure? A Squarespace Mega Menu is the perfect way to help web visitors find what they need!
A Mega Menu offers an improved user experience, encourages customers to stick around your Squarespace site for longer, and gives you an excellent opportunity to show off your brand identity. Unfortunately, there isn't an option in Squarespace to create a Mega Menu for your website.
However, with a little coding knowledge and a bit of planning, you can build a Mega Menu that helps people navigate your Squarespace 7.1 website with ease!
I got the inspiration for this article from Will Myers and his fantastic Squarespace Mega Menu tutorial, which you can find on his website. If you don't have the time to build a Squarespace Mega Menu yourself, why not buy his Mega Menu Pro plugin?
How to build a Squarespace Mega Menu
Here are the five steps you need to take when creating your Squarespace Mega Menu.
Step 1. Design your Mega Menu
To build a Mega Menu in Squarespace, you're essentially taking the footer section of your website and moving it to the top of your page. So to start, we need to create a new footer section!
Go to any page on your website, scroll down, and click the edit footer button. Create a new section and build your Mega Menu.
Be sure to place the new Mega Menu footer above your regular footer. Otherwise your regular footer will show up as a Mega Menu.
Step 2. Create your Mega Menu dropdown
When you build a menu in Squarespace, you need to create a dropdown in your page's navigation bar and identify the sections you want to include in your menu – the same logic applies to your Mega Menu.
Click Pages, click the + icon and select Dropdown. Give your dropdown a name, and make sure to remember the URL slug. You'll be using this URL in the next step! To see the URL slug, click on the gear icon besides the folder name.
Step 3. Add code to show and hide the Mega Menu
We're going to use JavaScript to combine, or 'append' our footer Mega Menu to the folder menu at the top of the page.
Go to Website > Website Tools (scroll down) > Code Injection and Header. Then copy and paste the following code to the very top and click Save:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
$('.header-display-desktop [href="/MEGAMENUURL"] + .header-nav-folder-content').append($('#footer-sections section:nth-of-type(1)'))
});
</script>MEGAMENUURL refers to the URL slug you created in step two of the process.
Step 4. Make the Mega Menu work on mobile
Currently the folder remains visible on mobile devices but appears empty. To display desired links in the mobile menu, simply add them to the folder within the main navigation.
To do this, go back to Pages and click + and then select Link, and drag them to the mega menu folder.
Please note that this Squarespace Mega Menu won't display any content if you view it on mobile, it will instead show links as a regular dropdown.
Step 5. Add code to adjust the Mega Menu width
So your Squarespace Mega Menu is in place, but it might look a little bit squished!
The good news is that the CSS below will fix this issue, and align your menu so it looks a lot better.
Add it in Website > Website Tools (scroll down) > Custom CSS
.header-display-desktop [href="/MEGAMENUURL"] + .header-nav-folder-content {
width:100vw;
right:0 !important;
left: 0 !important;
position:fixed;
box-sizing:border-box;
padding:0px !important;
}
.header-display-desktop [href="/MEGAMENUURL"] + .header-nav-folder-content .header-nav-folder-item {
display:none;
}
body.sqs-is-page-editing .header-display-desktop [href="/MEGAMENUURL"] + .header-nav-folder-content {
display:none;
}Do you want to edit the Mega Menu? The codes above will hide the mega menu while in edit mode. So to make any changes to it, temporarily remove the code from step 3 and 5, then add it back after your changes.
With CSS, you can add borders and shadows to style your Squarespace Mega Menu.
Don’t know the right CSS code? Don’t worry, there’s an easy workaround! Keep reading to find out more…
Bonus: Style your Squarespace Mega Menu
If you don't want to mess around with code, why not use Spark Plugin to customize your Mega Menu?
Here are five of my favorite designs:
1. Show on hover
This cool hover customization can show images, text, and more, when hovered. Easily create interactive elements on your Squarespace Mega Menu.
2. Adaptive logo color
Change the logo color on a dark Mega Menu background - this means you don’t have to spend time converting your logo to stand out!
3. Animated links
Use Spark Plugin to animate the header links when you hover over them.
4. Glassmorphism header
Implement a cool and contemporary frosted-glass effect like the one seen on iOS apps.
5. Improved dropdown
If you do not have time for adding a Mega Menu, then adding a dropdown is much simpler. This simple dropdown customization will make your dropdown not only more functional, but nicer to look at.
With over 100 fantastic customizations, you'll find the perfect code-free way to style your Squarespace Mega Menu to fit your site's design and branding.
Add Spark Plugin to your website and you can transform your Mega Menu in just a few clicks!
And there you have it! It's a little fiddly, but this process means you get a fantastic Mega Menu on your website that will make it easier for visitors to find exactly what they are looking for.
