Super Plugin Info

Works with Squarespace 7.1
Requires Business Plan or Higher
Uses CSS Editor and Code Injection

Step 1. Header Settings

Edit the desktop header and set the desktop header layout to logo on left / nav on right. This header layout is required for the plugin to work.

Step 2. Add this code to Header Code Injection

/* ----- EXAMPLE CODE FOR PREVIEW ---- */
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 3. Add this code to Footer Code Injection

/* ----- EXAMPLE CODE FOR PREVIEW ---- */

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
    }
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 4. Add this code to Custom CSS

/* ----- EXAMPLE CODE FOR PREVIEW ---- */

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
    }
function adipiscing(...elit) {
  if (!elit.sit) {
    return [];
  const sed = elit[0];
  dolor = sit - amet(dolor);
  return eiusmod.tempor(sed) ? sed : [sed];
    }
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 5. Customizable Options

These options are available in Custom CSS.

Open Menu Width (Desktop and Mobile)
Open Menu Content Width
Overlay Color (When Menu Is Open)
Menu Hamburger Icon Spacing
Menu Hamburger Icon Placement (Left or Right)
Link Size and Spacing

Helpful Tip - Menu Colors, Alignment, Etc.

This plugin is simply showing Squarespace’s mobile menu in the slide out, so native styles for the mobile menu will apply and can be adjusted like normal.

Site Styles: Colors and Fonts
Edit Header (Mobile): Open Menu Alignment and Icon Style

If you want to move the = icon to left or right, use the @menu-icon-left-or-right option in CSS.

Plugin Notes

Slide out direction and duration cannot be changed.
Keep the desktop header layout set to logo on left / nav on right.
Other styles like fonts and colors can be changed like normal.

Slide Out Menu - v2.0 (Preview Guide)