How to add a hamburger/text menu to your Squarespace 7.1 desktop site using CSS

Pin to save for later

A great option to achieve a minimal Squarespace website design is to incorporate a hamburger menu on your desktop site. This navigation style helps declutter your interface, allowing visitors to focus on your content without distractions.

While the hamburger menu is often associated with mobile design, applying it to desktop versions can offer a modern and minimal aesthetic that enhances your site's visual appeal. Plus, it ensures a consistent user experience across devices, giving your visitors the same streamlined navigation whether they’re on mobile or desktop.

In this guide, we'll walk you through two options for adding a mobile-style menu to your Squarespace 7.1 desktop site using CSS:

1. A classic hamburger menu on desktop

2. A text-based menu as an alternative to the hamburger icon
   

Let’s get started!

OPTION 1

How to add a hamburger menu to desktop

Example

From your Squarespace dashboard, go to:

1. Pages > Scroll down to Website Tools > Custom CSS

2. Copy & paste the CSS in the box below

3. Save!

// HAMBURGER MENU ON DESKTOP

@media screen and (min-width:768px) {
    .header-nav {
    display: none;
}
  
.header-actions {
    display: none;
}

.header-burger {
  display: flex;
}

.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

To change your logo position, go to:

1. Edit Mode

2. Hover mouse over navigation & click “Edit Site Header”

3. Click “Edit Design”

4. Select layout of choice

OPTION 2

How to use text for your mobile menu icon (instead of a hamburger icon)

Example

From your Squarespace dashboard, go to:

1. Pages > Scroll down to Website Tools > Custom CSS

2. Copy & paste the CSS in the box below

3. Save!

// MOBILE MENU ON DESKTOP

@media screen and (min-width:768px) {
    .header-nav {
    display: none;
}
  
.header-actions {
    display: none;
}

.header-burger {
  display: flex;
}

.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}}

.burger-box div {
display: none;
}


// CUSTOMIZE MENU TEXT

@media screen and (min-width:640px) {
.burger-box:after {
content: "MENU";
text-align: right;
font-size: 16px !important;
color: #000000;
display: block !important;
}}

Important notes:

content: "MENU"; — controls the text that will appear in replacement of the hamburger. Be sure to keep quotation marks if updating the text (eg. “EXPLORE”)

font-size: 16px !important; — controls the font size (update 16px to font size of choice)

color: #000000; — controls the color of the menu text (update #000000 to HEX code of choice)

Thanks for reading!

Did this tutorial help? Consider buying me a coffee as thanks! 🥰

Use discount code STYLEDSQUARE10 to save 10% off your Squarespace Subscription!

* Disclaimer: This post contains affiliate links. If you purchase through our links, we may earn a small commission at no extra cost to you. We only ever recommend tools we genuinely use and love.

More Squarespace tutorials