Mega Menu Plugin
Free Trial
The free trial will only function within the backend of Squarespace and on your built-in Squarespace domain
The free trial will not function on on your custom domain
We reserve the right to terminate our plugin trial service at anytime
Use of the plugin trial is subject to our Terms & Conditions
First Time Installation
If this is your first time installing the plugin then you will need to complete all of the installation steps.
Edit Plugin Configuration
Use our configuration editor which will import your existing configuration ready for you to edit.
Purchase The Full Plugin
Ready to purchase the full plugin? When you purchase the full plugin you’ll only need to repeat steps 1 & 2.
Step 1. Which Version & Template Are You Using?
If you’re not sure which template or version of Squarespace you’re using then please refer to the below Squarespace support document.
Step 2. Plugin Footer Code
Next, place the plugin footer code in your website's Global Code Injection Footer.
Website/Pages > Website Tools > Code Injection
If you purchase the full version of the plugin then you will need to delete the free trial footer code and install the footer code for the full version of the plugin
Plugin Footer Code
You will not need to repeat the following steps after you purchase the full version of the plugin
Step 3. Create A Page For Your Mega Menus
Create a Regular Page that contains all of your mega menus.
-
Create this page in the non-linked section of your website and give it a name such as mega menus.
-
We would recommend setting this page to Hidden under the SEO settings so search engines don’t index your mega menus.
-
You should only create one mega menu page. To add additional mega menus to the page you will simply add sections to the page as detailed below.
Add Sections To The Page
Each section that you add to this page will become a mega menu.
-
The first section will become your first mega menu.
-
The second section will become your second mega menu.
etc…
-
Auto layouts cannot be used.
-
You can add as many sections as you need to this page.
-
For example, if you need two mega menus then your page should contain two sections.
Notes:
-
We would recommend setting the section height of your mega menus to small.
-
Background images & section dividers cannot be added to your mega menus.
-
Image block animations cannot be used.
-
Gallery sections cannot be added to your mega menus.
-
Quick view & add to cart buttons will not function within your mega menus.
-
Auto layouts cannot be used.
Step 4. Enter Your Mega Menu Page URL
For this step you will need to enter the URL of your mega menu
page created in the previous step.To find your mega menu
page URL:-
From the Home Menu navigate to Pages
-
Hover over your mega menu
page and click the Gear Icon -
You will find the URL under URL Slug on the General tab
Correct URL Format
Incorrect URL Format
Step 5. Enter Your Navigation Items URL’s
For this step you will need a list of URLs from your website's navigation for the pages or folders that you would like to apply mega menus to.
To Find Your Navigation Items URLs:
-
From the Home Menu navigate to Pages
-
Hover over your navigation item or navigation folder and click the Gear Icon
-
You will find the URL under URL Slug on the General tab
Important:
-
Mega menus can only be applied to top-level navigation items, i.e. you cannot apply mega menus to items within a navigation folder.
-
Do not enter any URLs that are not from your website’s navigation.
- Do not enter the URLs of the individual mega menu pages from your mega menu index page created in step 3.
More Information
Correct URL Format
Incorrect URL Format
Step 6. Other Configurations
Style
Choose between full width or mini mega menus.
Hide On Scroll
If you enable this feature then your mega menus will automatically close when users scroll down the page.
Open Mega Menus On Click
By default your desktop mega menus will open on hover, enable this feature so that they open on click.
Mobile Mega Menus
If you enable this feature then your mega menus will also appear for your mobile navigation menu.
Disable Default Navigation Links
By default your navigation items with mega menus attached will still link to their respective pages when clicked. Enabling this feature will disable the navigation links.
Anchor Links
Enable this feature if you will be using anchor links in your mega menus.
HTTPS
Please ensure that you have SSL enabled on your website.
https://support.squarespace.com/hc/en-us/articles/205815898-Understanding-SSL-certificates
Animations
Type
Choose between fade-in or slidedown.
Slide Down with Fade-In
If you chose slide down above you can also enabled fade-in animations as well; otherwise you can skip this option.
Animation Speed
The default fade in speed is 350 milliseconds, enter 0 if you would not like your mega menus to fade in.
Step 7. Plugin Header Code
Next, place the plugin header code in your website's Global Code Injection Header.
Website/Pages > Website Tools > Code Injection
Plugin Header Code
Installation Complete
You have now completed the installation process. We have a few plugin add-ons listed below which you can also add to your website. In addition, you can also follow our guide to setting up Weglot translations for your mega menus.
Make your mega menus floating
Set a header colour on mega menu open
Make your mega menus transparent (Version 7.1 of Squarespace)
Set the close button colour (Version 7.0 of Squarespace)
Write your own CSS