House Icon (#02) - Mobile Menu
Plugin Details
Replace the default mobile menu burger icon with a house icon.
Compatibility
Works with Squarespace 7.1
Uses Custom CSS
House and X Close Icons Included
Compatible with all Mobile Header Layouts
Add to Custom CSS
// HOUSE MOBILE MENU ICON - GHOSTPLUGINS.COM //
@custom-burger-icon: url(https://static1.squarespace.com/static/5ba5e044b10f25cb908c506f/t/6612500cc73e8e661052605b/1712476172615/house_icon_2.png); // house 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;
@house-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(@house-icon-dark-or-light); } .header--menu-open .burger { filter:invert(@close-icon-dark-or-light); }
// HOUSE MOBILE MENU ICON - GHOSTPLUGINS.COM //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)
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.
