Mobile Menu Icon - Take Out
1. Plugin Info
Replace the default mobile menu burger icon with a take out food icon.
Works with Squarespace 7.1
Uses Custom CSS
Take Out and X Close Icon Included
Compatible with all Mobile Header Layouts
2. Add this code to Custom CSS
// Take Out Food Mobile Menu = Icon - Ghost //
@custom-burger-icon: url(https://static1.squarespace.com/static/5ba5e044b10f25cb908c506f/t/66125ae95f0a492fdcfafa34/1712478953236/take_out_icon.png); // take out 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: 40px;
@menu-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(@menu-icon-dark-or-light); } .header--menu-open .burger { filter:invert(@close-icon-dark-or-light); }
// Take Out Food 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.
