Replacing the mobile hamburger menu icon with your own image on Squarespace 7.1
Squarespace 7.1 provides a clean, functional hamburger menu icon on mobile devices by default. But if you're looking to add a custom touch to your site, you may want to replace the default hamburger icon with your own image or logo.
In this tutorial, you'll learn how to swap out the mobile menu icon for a custom image using a little CSS. This is perfect for anyone looking to better match their brand or design style.
Table of Contents
Why Replace the Default Hamburger Icon?
Here are a few reasons why you might want to use a custom image for the mobile menu:
Strengthen brand identity
Improve visual consistency
Add creative flair to your mobile navigation
Use a custom-designed icon or animated menu trigger
Complexity: Intermediate
Step-by-Step Instructions
Step 1: From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and add appropriate code into the Custom CSS editor box.
.burger {
background-image: url('[icon_URL]');
background-size: contain;
background-repeat: no-repeat;
background-position: right;
background-color: transparent !important;
width: 32px;
height: 25px;
}
.burger-inner {
display: none;
}
Replace [icon_URL] with the url of your uploaded icon like , also you can adjust the width and height to suit your image dimensions.
Key Takeaways
Squarespace allows CSS-level control over its mobile hamburger menu icon.
You can upload any image and apply it as a replacement for the default icon.
Make sure your image is optimized for small screens (ideally SVG or PNG with transparency).
Don’t forget to test on multiple screen sizes to ensure good alignment.
FAQs
Will this affect desktop view?
No, this change only applies to the mobile menu icon (triggered on smaller screen sizes).
Can I use an animated GIF or SVG?
Yes, as long as the file format is supported and hosted with a valid URL.
How do I adjust the position of the icon?
Use margin, padding, or tweak background-position inside the .Header-menu-toggle class.
What if I want to revert to the default icon?
Simply remove the custom CSS, and Squarespace will restore the original hamburger icon.
Conclusion
A custom mobile menu icon is a subtle but impactful way to enhance your site's branding and design consistency. With a quick CSS tweak, you can make your Squarespace mobile navigation feel more unique and aligned with your brand.
All work in this guide is provided ‘as-is’. Other than as provided in this agreement, this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.
If you require professional advice, we recommend that you purchase the services of a Developer.
