Take Out Icon - Mobile Menu
Plugin Details
Replace the default mobile menu burger icon with a take out box icon.
Compatibility
Works with Squarespace 7.1
Uses Custom CSS
Take Out Box and X Close Icons Included
Compatible with all Mobile Header Layouts
Add to Custom CSS
// TAKE OUT BOX MOBILE MENU ICON - GHOSTPLUGINS.COM //
@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 BOX MOBILE MENU ICON - GHOSTPLUGINS.COM //Customizable Options
Take Out Box Icon (Menu Is Closed)
Close X Icon (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 Icon
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.
