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.

---

Want more?