SQUARESPELL

View Original

How to Create a Dynamic Mega Menu in Squarespace 7.1: Complete Guide

Squarespell

Transform your Squarespace navigation with a professional mega menu. This step-by-step guide will show you exactly how to implement it, even if you're not a developer.

Essential Setup Steps

Step 1: Create Content Pages

  1. Go to your Squarespace Pages panel

  2. Click the '+' icon in the Not Linked section

  3. Create new pages for each mega menu dropdown (e.g., "Services Menu", "About Menu")

  4. Design these pages with your mega menu content using Squarespace blocks

  5. Important: Copy the URL of each page (e.g., "/services-menu", "/about-menu")

Step 2: Set Up Navigation Links

  1. Go to your main navigation

  2. Add menu items that will trigger the mega menus

  3. Use the exact URLs from your Not Linked pages

  4. Example: If your menu page URL is "/about-us", your navigation link should be "/about-us"

Step 3: Add the Code

Go to Pages → Website Tools → Code Injection → FOOTER and add this code:

  • In JS, replace the “/LINK1” “/LINK2” “/LINK3” with your page’s link in the code.

  • See image for reference. Here I have used “/shop” for my shop page in the menu.

See this product in the original post

Step 4: Add the CSS

Go to Design → Custom CSS and add this code:

See this content in the original post

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.

See this content in the original post

Common Issues & Solutions

  1. Menu Not Showing

    • Double-check your page URLs in the code match exactly with your Not Linked pages

    • Make sure the code is added to the Footer injection, not Header

    • Verify your navigation links use the exact same URLs

  2. Content Not Loading

    • Ensure your Not Linked pages are published

    • Check that the pages aren't password protected

  3. Mobile Display Problems

    • Clear your site cache

    • Make sure you've added the mobile CSS

Need help? Leave a comment below!