How to Add a Hamburger Menu to Desktop in Squarespace
Who doesn’t love a good hamburger?
A hamburger menu is traditionally reserved for the mobile version of a Squarespace website, however sometimes as a web designer you may want to use this minimalist design on the desktop version of your website too - to avoid displaying every page link at the top.
Whilst working on a recent client site, this is exactly what I wanted to achieve.
In this tutorial, i’ll show you exactly how to achieve this with some simple CSS code! Let’s do this.
Step 1: Opening the Squarespace settings menu.
To get started, log in to your Squarespace account and open your site. On the left menu, click “Pages”.
Next, in the “Pages” tab, locate and click on the “Website Tools” option.
Step 2: Open the Custom CSS panel.
Inside of the “Website Tools” section, click on the top “Custom CSS” option to open the CSS editor in your Squarespace website.
Step 3: Upload the custom code.
You should now see the Squarespace Custom CSS editor. All we need to do now is enter a couple of lines of code. Find the code below!
Now all you need to do is copy and paste the following code into the CSS editor:
.header-nav, .header-actions {
display: none;
}
.header-burger {
display: flex;
}
.header--menu-open .header-menu {
visibility: visible;
opacity: 1;
}
STEP 4: SAVE AND PREVIEW YOUR CHANGES!
That’s it! Your navigation bar should now be updated. Remember to save your changes by clicking “Save” in the top right of the menu.
If you now see the hamburger menu on your desktop, congratulations! You have successfully updated the navigation menu on Squarespace 7.1.
5 benefits of using a hamburger menu on a Squarespace site:
Using a hamburger navigation menu on your Squarespace website can offer several benefits, particularly for mobile responsiveness and user experience. Here are five key benefits:
1. Space Efficiency
The hamburger menu conserves valuable screen space, which is particularly beneficial for mobile and tablet users where screen real estate is limited. By hiding the navigation options behind an icon, the layout remains clean and uncluttered, allowing more room for important content.
2. Improved User Experience
A hamburger menu can streamline the user experience by providing a simple and intuitive way to access navigation options. Users are familiar with this type of menu, especially on mobile devices, and it helps them easily find their way around your site without feeling overwhelmed by options.
3. Enhanced Aesthetics
Incorporating a hamburger menu can contribute to a minimalist and modern website design. By reducing visual clutter and focusing on essential elements, your website can appear more professional and aesthetically pleasing. This design choice can enhance the overall look and feel of your site.
4. Consistency Across Devices
Using a hamburger menu ensures consistency in navigation across different devices. Whether users are accessing your website from a desktop, tablet, or smartphone, the navigation method remains the same, providing a seamless experience. This consistency helps users navigate your site more effectively, regardless of the device they use.
5. Focus on Content
With navigation tucked away in a hamburger menu, users can focus more on your content rather than being distracted by a plethora of navigation links. This is particularly useful for content-heavy sites where the primary goal is to engage users with articles, images, or videos. By simplifying navigation, you keep users’ attention on the content itself.
Your users will thank you for adding this.
Congrats! You’ve officially reached the bottom of the article.
Want more tips like this? Join my newsletter below! It’s free, and I won’t spam you.
Your Squarespace Designer
Hi, I’m Nick. I've been designing killer brands and stunning websites for over five years. I have worked with all types of clients of all sizes, from entrepreneurs to global corporations, and I combine my graphic design & branding experience with Squarespace specialism to make bespoke websites that are uniquely you.
Ready to discuss your project? Book a free 15 min consultation call!
