Forced Mobile Menu (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
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 on desktop, 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
Keep the desktop header layout set to logo on left / nav on right.
Other styles like fonts and colors can be changed like normal.