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).

Adding a border around Squarespace hamburger menu

📩 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.


Want more?

Sam Crawford

by Crawford is led by Sam Crawford, a multi-award-winning Squarespace website designer with 700+ sites launched for clients in over 30 countries. He builds fast, mobile-friendly Squarespace 7.1 websites designed for SEO, clear structure, and conversion.

As a Squarespace Expert, Enterprise Partner, Circle Member, and community speaker, Sam is known for pushing the platform’s limits. With 200+ reviews, clients highlight by Crawford’s clarity, precision, and real-world results like higher rankings and stronger lead generation.

https://bycrawford.com
Previous
Previous

Creating a Brand Identity with Squarespace AI

Next
Next

Squarespace Contact Forms UPDATE [New Features Released]