InsideTheSquare.co

View Original

How to use an image for your Squarespace mobile menu icon

See this content in the original post

See this content in the original post

This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

In this tutorial, we're diving into the world of custom CSS to replace that standard mobile menu icon with an image of your choice.

If youโ€™re new to code, youโ€™re in the right place. I'll walk you through every step, from uploading your image to tweaking the CSS for perfect placement.

Whether you're a small business owner looking to strengthen your brand or a creative wanting to add some extra flair, this simple hack will take your Squarespace site from great to unforgettable.

You'll find the codes & related resources below, but the image you use for your mobile menu icon will make a difference in the code you'll need. Make sure you watch the tutorial so you know which code to use and how to customize it!

See this content in the original post

See this content in the original post

Here are the codes from this tutorial. There are two options - one for a square image and one for a rectangle. Be sure to use the correct code for your image ratio:

See this content in the original post

See this content in the original post

๐Ÿ“บ Tablet view workshop โ†’ insidethesquare.co/tablet

๐Ÿ“š Squarespace CSS Code Collection โ†’ insidethesquare.co/css

๐Ÿ™‹โ€โ™€๏ธ Code troubleshooting tips โ†’insidethesquare.co/code-help