How to Add Burger Navigation to Web View Squarespace

Written By Victor Rolf

In this blog tutorial, learn how to add a burger navigation to web view in Squarespace

Let’s dive in..

Watch the video

Check out the YouTube video below 👇

 

To enable the burger navigation on the web version of our website, follow these steps:

  1. Navigate to Pages → Website Tools → Custom CSS.

  2. Inside the Custom CSS section, copy and paste the following code

.header-nav, .header-actions { display: none; } .header-burger { display: flex; } .header--menu-open .header-menu { visibility: visible; opacity: 1; }

Once this code is added, the burger navigation will appear on the web version.

Pro Tip:

Want to learn how to change the burger nav icon? Read more here.

Image showing the code of how you can get the burger nav on Squarespace webview
 
 

Your designer

I'm Victor Rolf, an expert Squarespace designer .If you'd like to discuss a potential project, you can email me at victor@rolfmade.com or get in touch here. Alternatively, book a free 15-minute consultation call here.

Victor Rolf https://www.rolfmade.com/
Previous

How to Change Font Size on Mobile View Squarespace
Next

How to Customize the Burger Nav Icon Squarespace