Horizontal Dots Icon - Mobile Menu
Plugin Details
Replace the default mobile menu burger icon with a horizontal dots icon.
Compatibility
Works with Squarespace 7.1
Uses Custom CSS
Horizontal Dots and X Close Icons Included
Compatible with all Mobile Header Layouts
Add to Custom CSS
// HORIZONTAL DOTS MOBILE MENU ICON - GHOSTPLUGINS.COM //
@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); }
// HORIZONTAL DOTS MOBILE MENU ICON - GHOSTPLUGINS.COM //Customizable Options
Horizontal Dots Icon (Menu Is Closed)
Close X Icon (Menu Is Open)
Menu Icon Alignment
Menu Icon Size
Menu Icon Color (Dark or Light)
Notes
Change icon alignment to left if mobile header layout moves icon to the left side.
Use Your Own Icons
Use CSS > Manage Files to upload and generate a file URL for your own icon. Then swap out the default icon’s URL with your file’s URL.
