Super Easy Mega Menu for Squarespace 7.1
Mega Menu’s are all over the place in website-land these days. Unfortunately, Squarespace doesn’t have a native way to build these out, so in this tutorial I’m going to show you how to build one.
A couple quick notes before we start:
This tutorial is for Squarespace 7.1 websites. If you’re looking for a tutorial for Squarespace 7.0, check out this one from Vigasan at Adlytic Marketing.
If you don’t want to get into the code, or if this is for a client project that you need to offload, check out my plugin that makes this setup much easier.
Project breakdown
So here is the big picture breakdown of what we’re going to do:
We’re going to add a section to our footer that will become our mega menu (we’re using the footer because this it’s on every page)
We’re going to add a folder to our main nav.
We’re then going to write some jQuery to move the footer section into the main nav folder.
We’re going to write our CSS to make everything look nice.
Mobile Optimize.
Steps
1. Add The Footer Section
This should be the simplest step. In your Squarespace editor, scroll down to the bottom and edit the footer. Add an additional section down there and add in whatever content that you want. This is what mine looks like:
Another simple step here. Just add a folder to your main nav here and give it a url that makes sense, we’ll be using this URL later. Here is what I’ve done.
In my examples, I’m calling mine “Men’s Clothes” and my url is /mens-clothes
We’ll come back and add items to this folder later.
3. Move the Footer Section to the Folder Dropdown
To move the section where we’d like it to go, we’ll need to use the jQuery append() function.
This allows us to select an element on our website and move it to the last child of another element. In our case we want to select the footer element and move it to the last child element of the folder dropdown.
First we select the item that we want to append an element too:
$('.header-display-desktop [href="/mens-clothes"] + .header-nav-folder-content')
This selector Is choosing the element with a class of .header-nav-folder-content that is a direct sibling to the element with an href attribute of /mens-clothes which is a descendent of an element with a class of .header-display-desktop.
Then we want to select the footer section. We can either do this by the "data-section-id" or by the "nth-of-type" pseudo-class. This is what I have in my example, yours might look different though:
<script>
$('.header-display-desktop [href="/mens-clothes"] + .header-nav-folder-content').append($('[data-section-id="5f71680d2b388d20dada19a0"]'))
</script>
This isn’t finished yet though. First let’s wrap this in a load function so that it only runs once the entire page has loaded (thus all the elements we want to move around).
<script>
$(function(){
$('.header-display-desktop [href="/mens-clothes"] + .header-nav-folder-content').append($('[data-section-id="5f71680d2b388d20dada19a0"]'))
});
</script>
The let’s wrap all of this in <script> tags so that this is all read by our broswer as javascript instead of HTML.
<script>
$(function(){
$('.header-display-desktop [href="/mens-clothes"] + .header-nav-folder-content').append($('[data-section-id="5f71680d2b388d20dada19a0"]'))
});
</script>
If you want to use the :nth-of-type method, this code will select the second section within our footer and position it correctly.
<script>
$(function(){
$('.header-display-desktop [href="/mens-clothes"] + .header-nav-folder-content').append($('#footer-sections section:nth-of-type(2)'))
});
</script>
Now it’s placed where we want it. Now let’s style the position.
4. Style the Layout of the Dropdown
Our Mega Menu now looks like a mess, but it’s positioned correctly! So let’s fix that laytout. Let’s use that same code we used to select the correct dropdown folder from above, and use that to style our elements.
Here is some code that should get it looking more normal.
.header-display-desktop [href="/mens-clothes"] + .header-nav-folder-content{
width:100vw;
right:0 !important;
left: 0 !important;
position:fixed;
box-sizing:border-box;
padding:0px !important;
}
Then we can add a few more styles like a box-shadow and a bottom-border to make it pop out a little more.
.header-display-desktop [href="/mens-clothes"] + .header-nav-folder-content{
width:100vw;
right:0 !important;
left: 0 !important;
position:fixed;
box-sizing:border-box;
padding:0px;
border-bottom:1px solid;
box-shadow:0px 5px 5px #aaa;
}
5. Mobile Styles
Mobile styles are relatively simple. Since we only added our footer section in the folder that is within the header-display-desktop element, our folder still appears as normal on mobile, just with no content in it. So any links that we want displayed on our mobile menu, we just need to add to the folder in our main nav.
This will also add these items to the desktop dropdown, so we need to add this little bit of code to remove them.
.header-display-desktop [href="/mens-clothes"] + .header-nav-folder-content .header-nav-folder-item{
display:none;
}
And that’s it! If you want to create another Mega menu, you’ll just need to follow the same steps, just replacing the href attribute selector, [href="/mens-clothes"], along the way.
Code
Javascript
<script>
$(function(){
$('.header-display-desktop [href="/Folder-URL-here"] + .header-nav-folder-content').append($('#footer-sections section:nth-of-type(2)'))
});
</script>
CSS
Add this to your Design » Custom CSS area
.header-display-desktop [href="/Folder-URL-here"] + .header-nav-folder-content{
width:100vw;
right:0 !important;
left: 0 !important;
position:fixed;
box-sizing:border-box;
padding:0px;
border-bottom:1px solid;
box-shadow:0px 5px 5px #aaa;
.header-nav-folder-item{
display:none;
}
a{
display:inline !important;
}
.sqs-block-button-element{
display:inline-block !important;
padding: 1em 1.6em !important;
}
}
Additional Styles
Adjust The Mega Menu Lower
Adjust the 2vw to change the position. “2vw” stands for 2% of the screen width.
.header-display-desktop [href="/about"] + .header-nav-folder-content .page-section {
margin-top: 2vw;
}
[href="/about"] + .header-nav-folder-content{
background:none!important;
}
Limitations
You need to add more CSS and Javascript every time you want more mega menus
You need to disable or remove the Javascript to make edits.
The Color Theme of each section must match the color theme of the header.
If you wish not to deal with these limitations, the plugin below is more advanced to handle these issues.
Mega Menu Pro
Easily add a Mega Menu to your Squarespace 7.1 website to extend your websites navigation. With simple copy-and-paste code and clear installation video, you'll be up and running in no time.
See Demo (password: demo)
