Taco Icon - Mobile Menu
Plugin Details
Replace the default mobile menu burger icon with a house icon.
Compatibility
Works with Squarespace 7.1
Uses Custom CSS
Taco and X Close Icons Included
Compatible with all Mobile Header Layouts
Add to Custom CSS
// TACO MOBILE MENU ICON - GHOSTPLUGINS.COM //
@custom-burger-icon: url(https://static1.squarespace.com/static/5ba5e044b10f25cb908c506f/t/661255570cafdc3e6f602c6d/1712477527526/taco_icon.png); // taco 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;
@taco-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(@taco-icon-dark-or-light); } .header--menu-open .burger { filter:invert(@close-icon-dark-or-light); }
// TACO MOBILE MENU ICON - GHOSTPLUGINS.COM //Customizable Options
Taco Icon (When Menu Is Closed)
Close X Icon (When 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.
