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.

Start Now

Edit Plugin Configuration

Use our configuration editor which will import your existing configuration ready for you to edit.

Edit Configuration

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.

Purchase Now

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.

https://support.squarespace.com/hc/en-us/articles/115005308187-What-s-my-site-s-template-and-version-

 
Squarespace Mega Menu Plugin Free Trial

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. 

  1. The first section will become your first mega menu. 

  2. 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.

Create an Index 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 only need one mega menu index page. To add additional mega menus to this index page you will simply add pages to the index page as detailed below.

Add Regaular Pages To Your Index Page

Each page that you add to your index page will become a mega menu.

  1. The first page within the index page will become your first mega menu.

  2. The second page within the index page will become your second mega menu.

etc…

  • Gallery pages cannot be used, only add regular pages to your mega menu index page.

  • You can add as many pages as you need to this index page.

  • For example, if you need two mega menus then your index page should contain two pages.

 

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.

Notes:

  • Only regular pages within your index page can be used, gallery pages cannot be used.

  • Background images cannot be added to your mega menus.

  • Image block animations cannot be used.

  • Quick view & add to cart buttons will not function within your mega menus.

  • We would also advise against Gallery Blocks as there can be some cropping issues on mobiles.

Step 4. Enter Your Mega Menu Page URL

For this step you will need to enter the URL of your mega menu index page created in the previous step.

To find your mega menu index page URL:

  • From the Home Menu navigate to Pages

  • Hover over your mega menu index page and click the Gear Icon

  • You will find the URL under URL Slug on the General tab

Mega Menu Index Page URL
You have entered an invalid URL, please check your URL format.
 

Correct URL Format

/mega-menus
 

Incorrect URL Format

mega-menus
https://yourdomain.com/mega-menus

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

Finding Folder URLs
Finding Page URLs
Applying A Mega Menu To Your Homepage
Enter Your Navigation URLs
You have entered an invalid URL, please check your URL format.
Add Another URL
 

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

How Will Mega Menus Be Assigned?
Notes

Correct URL Format

/your-navigation-item
 

Incorrect URL Format

your-navigation-item
https://yourdomain.com/your-navigation-item

Step 6. Other Configurations

Style
Choose between full width or mini mega menus.

Bottom Header
Enable this feature if you're using the bottom header on your website. If you're not using the bottom header then you must keep this feature disabled.

If you're not sure then check the instructions to the right. → →

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

 

Am I Using The Bottom Header?

  • If you’re not sure if you’re using the Bottom Header/Nav Area then navigate to:
    Design > Site Styles

  • Under Header: Layout see if any items are positioned:
    Bottom Left, Bottom Center or Bottom Right

  • If there are items in these positions then this means you are using the Bottom Header (see below image) and you should enable this feature.

    • Bottom Header

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

<!-- Mega Menu Plugin Config © Snazzy View Ltd --><script>window.SnazzyViewMegaMenu={mega_menu_links:['/your-navigation-link',],mega_menu_page_url:'/mega-menus',bottom_nav:false,hide_on_scroll:false,mobile_mega_menus:false,open_on_click:false,disable_default_link:false,anchor_links:false,animation_speed:350,slide_down:false,slide_fade:false,mini_mega_menus:false}</script><!-- End Mega Menu Plugin Config © Snazzy View Ltd -->
 

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

Purchase The Full Plugin