Add a Border Around a Hamburger Menu on Squarespace
Everyone loves burger menus but how much can you customize them on Squarespace?
Well, one of the ways I like to customize and make my hamburger menus stand out is by adding a border.
With just a few lines of code you can add a border and customize aspects such as the radius and padding.
Keep reading to find out more…
Watch the video
Check out the YouTube video below 👇
Firstly make sure you’re in mobile view and then head to Google Chrome Developer Tools by clicking Shift + Command + C (on a Mac) and identify your burger menu, copying the ID.
Next, head to Website > Website Tools > Custom CSS and paste your ID into the custom CSS box.
You then need to add the following code:
.burger {
border: solid 2px #fff;
border-radius: 5px;
padding: 7px;
}
Within this code you can customize aspects such as the thickness and color of the border (border), the curve of the border (border-radius) and the padding of the border (padding).
📩 Join the inner circle to get exclusive code updates
Once you’re happy hit save and you’ll have added a border to your hamburger menu on Squarespace!
Your designer
I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.