How to Replace Your Mobile Menu Icon in Squarespace 7

May 9

This tutorial is for the BRINE/BEDFORD theme of Squarespace, built with an older version. For more information, visit https://insidethesquare.co/themes

In this tutorial, I am going to show you how to replace the double line mobile menu icon on your site with any image you want!

This tutorial is a two-step process; first, you need to upload the image to your site, and then use the code below in your Custom CSS to put that image in the right place so it functions as your mobile menu.

Be sure to watch the tutorial before you try this on your own so you know exactly what to change to make it look great!

Anywho, codes below for the major theme families in Squarespace 7. I recorded this demo is in my Brine site but the main part of the code you need to change is basically the same.

Brine Squarespace Templates

.Mobile-bar-menu {stroke:transparent; background-image: url('Your-URL-Here'); background-size: contain; background-repeat: no-repeat; background-position: right; background-color: transparent !important; height: 25px; } .burger-inner { display: none; }

Bedford Squarespace Templates

.mobile-nav-toggle .top-bar, .mobile-nav-toggle .middle-bar, .mobile-nav-toggle .bottom-bar{background-color:transparent!important;} .mobile-nav-toggle{ background-image: url('Your-URL-Here'); background-size: contain; background-repeat: no-repeat; background-position: top; transform:scale(2); background-color: transparent !important; height: 50px; }

Pacific Squarespace Templates

.mobile-nav-toggle-label .top-bar, .mobile-nav-toggle-label .middle-bar, .mobile-nav-toggle-label .bottom-bar{background-color:transparent!important;} .mobile-nav-toggle-label{ background-image: url('Your-URL-Here'); background-size: contain; background-repeat: no-repeat; background-position: left; transform:scale(2); background-color: transparent !important; height: 30px; }

York Squarespace Templates

.mobile-nav-toggle-label .Icon--hamburger {stroke:transparent; background-image: url('Your-URL-Here'); background-size: contain; background-repeat: no-repeat; background-position: left; transform:scale(2); background-color: transparent !important; height: 30px;}

Five Squarespace Templates

#mobile-navigation #mobile-navigation-label{color:transparent; background-image: url('Your-URL-Here'); background-size: contain; background-repeat: no-repeat; background-position: left; background-color: transparent !important; transform:scale(1.5); margin: 5px; height: 25px;} #mobile-navigation {height:40px;}

Download Transcript