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.


Previous
Previous

Mobile Menu Icon - House (#01)

Next
Next

Navigation - Underline Hover Style