Slide Out Menu - v2.0 (Preview Guide)
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
Step 3. Add this code to Footer Code Injection
Step 4. Add this code to Custom CSS
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.