Circle Burger Icon - Mobile Menu
Plugin Details
Replace the default mobile menu burger icon with a circle burger icon.
Compatibility
Works with Squarespace 7.1
Uses Custom CSS
Circle Burger and X Close Icons Included
Compatible with all Mobile Header Layouts
Add to Custom CSS
// CIRCLE BURGER MOBILE MENU ICON - GHOSTPLUGINS.COM //
@custom-burger-icon: url(https://static1.squarespace.com/static/5ba5e044b10f25cb908c506f/t/66125bd7bfb77c0da724d793/1712479191332/circle_menu_icon.png); // circle 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;
@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); }
// CIRCLE BURGER MOBILE MENU ICON - GHOSTPLUGINS.COM //Customizable Options
Circle Burger 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 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.
