Mobile Menu Icon - House (#02)
1. Plugin Info
Replace the default mobile menu burger icon with a house icon.
Works with Squarespace 7.1
Uses Custom CSS
House and X Close Icon Included
Compatible with all Mobile Header Layouts
2. Add this code to Custom CSS
// House Mobile Menu = Icon - Ghost //
@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 - 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.
