t,,
Step 1: Designing Your Custom Mobile Menu Icon: Before you implement the custom mobile menu icon on your Squarespace site, you need to design the icon itself. You can use graphic design tools like Adobe Illustrator, Canva, or any other software you are comfortable with. Aim for a simple and recognizable design that complements your website's overall look and feel. Ensure the icon is clear and easy to identify even at smaller sizes.
Step 2: Uploading the Icon to Squarespace: Once you have the custom mobile menu icon ready, the next step is to upload it to your Squarespace media library. Follow these steps:
Log in to your Squarespace account and navigate to the editor of the website you want to modify.
In the editor, click on the "Settings" option from the left-hand menu.
From the dropdown, select "Advanced" and then click on "Media."
Click the "Add images or videos" button to upload your custom mobile menu icon.
Step 3: Obtaining the URL of the Custom Icon: After successfully uploading the custom icon, you need to obtain its URL. Here's how:
Go to your Squarespace media library where you uploaded the custom icon.
Click on the icon image to view it in full size.
Right-click on the image and select "Copy Image Address" or "Copy Image URL" (the wording might vary depending on your browser).
Step 4: Adding Custom CSS: Now that you have the URL of your custom mobile menu icon, it's time to add some custom CSS to your Squarespace website to replace the default mobile menu icon with your custom one. Follow these steps:
In Squarespace, navigate to the editor of the website where you want to apply the custom mobile menu icon.
From the left-hand menu, click on "Design," then choose "Custom CSS."
In the Custom CSS editor, you will add the following code:
// Custom Mobile Menu Icon //
@custom-burger-icon: url('FILE-URL-HERE');
@custom-burger-icon-menu-open: url('FILE-URL-HERE');
@custom-burger-icon-align: right;
/* ---- Do Not Edit Below ---- */
.burger { position: relative; display: inline-block; background-image: @custom-burger-icon !important; background-size: contain !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; }
// Custom Mobile Menu = Icon //