Mobile Menu Icon - Horizontal Dots
1. Plugin Info
Replace the default mobile menu burger icon with a vertical dots icon.
Works with Squarespace 7.1
Uses Custom CSS
Dots and X Close Icon Included
Compatible with all Mobile Header Layouts
2. Add this code to Custom CSS
// Dots (Horizontal) Mobile Menu = Icon - Ghost //
@custom-burger-icon: url(https://static1.squarespace.com/static/5ba5e044b10f25cb908c506f/t/661256e3689efc3788bc4eab/1712477923168/dots_horizontal.png); // dots icon included
@custom-burger-icon-menu-open: url(https://static1.squarespace.com/static/5ba5e044b10f25cb908c506f/t/66124d6ebfb77c0da723140f/1712475502377/close_icon.png); // close x icon included
@custom-burger-icon-align: right;
@custom-burder-icon-size: 35px;
@dots-icon-dark-or-light: 0; // 0 for dark icon, 1 for light icon
@close-icon-dark-or-light: 0; // 0 for dark icon, 1 for light icon
/* ---- Do Not Edit Below ---- */
.burger { position: relative; display: inline-block; background-image: @custom-burger-icon !important; background-size: @custom-burder-icon-size !important; background-repeat: no-repeat !important; background-position: @custom-burger-icon-align !important; } .burger-inner { display: none !important; } .header--menu-open .burger { background-image: @custom-burger-icon-menu-open !important; } .burger { filter:invert(@dots-icon-dark-or-light); } .header--menu-open .burger { filter:invert(@close-icon-dark-or-light); }
// Dots (Horizontal) Mobile Menu = Icon - Ghost //3. Customizable Options
House Icon (When Menu Is Closed)
Close X Icon (When Menu Is Open)
Menu Icon Alignment
Menu Icon Size
Menu Icon Color (Dark or Light)
Want to use your own icons? Use Custom CSS > Manage Files to upload and generate a file URL for your own icons. Then replace the default icon links with your file URL.
4. Plugin Notes
We recommend keeping the icon’s size 40px or less.
If uploading your own icons, PNG format is recommended.
If your icons are not showing, ensure you are adding the file’s full URL.
Change icon alignment to left if mobile header layout moves icon to the left side.
