Creating a Mega Menu on Squarespace

Table of Contents

If you've ever looked into creating a mega menu on Squarespace but been disappointed when you found out that you can't, this mega menu tutorial is for you!

Before we begin, if your template has Ajax Loading. We need to disable that first. Go to DESIGN → SITE STYLES and look for AJAX LOADING and disable it by unchecking the box beside it.

Please note: These instructions will work for any template in the Brine family. If you're using a different template, you WILL need to modify the code slightly to the classes that your template uses.

Step 1 - Creating the Mobile Fallback Menu

First, we're going to build out the menu as it'll appear on mobile. Since there isn't room on a mobile screen for a mega menu, we'll need this menu as a fallback. In your main navigation, create a folder and insert the links that your mega menu should display on mobile.

Step 2 - Creating a Mega Menu for Desktop

Go to any page on your website while logged in and scroll down to your footer. Hover over the footer until you see the section for Footer Top Blocks. Click EDIT on this section and build out your mega menu how you want it to appear. You can use as many columns as Squarespace will allow, but I recommend 3-4 so it doesn't get too cluttered.

Step 3 - Adding the JQuery

Go to SETTINGS → ADVANCED → CODE INJECTION and copy and paste the following code into the HEADER section.

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
    $(".Header-nav--primary .Header-nav-item--folder:nth-child(4) .Header-nav-folder").append( $( "#footerBlocksTop" ));
  });
</script>

In the code above, change the 4 in ".Header-nav-item--folder:nth-child(4)" to match whatever position your menu folder is. If your folder is the 3rd menu item, for example, change the 4 to a 3.

Step 4 - Adding the CSS

Go to DESIGN → CUSTOM CSS and copy and paste the following code in there.

/********* Mega menu code *********/
/* Adjust width and vertical position */
.Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(4) .Header-nav-folder {
    width: 90vw;
    position: fixed;
    left: 5vw;
    top: 60px;
    display: none;
}

/* Reveal menu when someone hovers */
.Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(4):hover .Header-nav-folder {
    display: block !important;
}

/* Hide the default dropdown */
.Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(4) .Header-nav-folder > a {
    display: none;
}

/* Make links not underline, and give more vertical spacing */
.Footer-blocks .sqs-block-html p a{
  border-bottom: 0px;
  line-height: 2em;
}

In the code above, change the 4 in ".Header-nav-item--folder:nth-child(4)" to match whatever position your menu folder is. If your folder is the 3rd menu item for example, change the 4 to a 3. There are 3 spots where ".Header-nav-item--folder:nth-child(4)" appears in the CSS.

Step 5 - Styling the Menu as Needed

To change the background color of the mega menu, just go to DESIGN → SITE STYLES and look for the "Folder Color" option and change the color as needed.

To make the mega menu more or less wide, modify the code in Step 4 so that instead of "width: 90vw;" it says whatever width you'd like. So full width would be "width: 100vw;" for example. If you change the width, make sure you adjust the "left: 5vw;". So if you want a full-width mega menu, set "left: 5vw;" so that there's no spacing on the left.

The final option is to move the mega menu up or down to sit below your regular menu wording. To change that, just modify the code in Step 4 so that instead of "top: 60px;" it says whatever spacing you want from the top of the screen.

---

Video Instructions

---

Additional - Squarespace 7.1 Mega Menu

I’ve stopped developing the mega menu code for 7.1 because there are two excellent options that already exist. They are as follows. Either plugin will work, and both will let you have multiple mega menus on Squarespace 7 or Squarespace 7.1. I personally use the Snazzy View one.

1. Snazzy View - Mega Menu Plugin for Squarespace

2. Schwartz Edmisten - Squarespace Mega Menu Plugin