How to force hamburger / mobile menu on the desktop in Squarespace 7.1

Forcing hamburger on tablet and desktop (not recommended)

Do you really hamburger on desktop? Not many sites will benefit from the hidden navigation. Best practice would be to just to show the navigation by default and not to hide it behind the burger.

/* Show burger */
.header .header-burger{
  display: flex;
} 

/* Hide nav */
.header-nav { 
  display: none;
}

/* Make nav visible */
.header--menu-open .header-menu {
  opacity: 1; 
  visibility: visible;
}

/* Delete if you want to keep the cart, social icons & cta */
.header-actions { 
 display: none;
}

/** Uncomment to remove buttons from the overlay menu **/
/*
.header-menu-cta {
  display: none;
} */

Forcing hamburger only on tablet only (recommended)

On tablet though, it’s pretty much fine to use hamburger, because Squarespace shows full menu too early, making it collapsing into two lines. We’ll just need to add a media query:

/* Only force hamburgers on tablets */
@media screen and (max-width: 1024px) {
 
/* Show burger */
.header .header-burger{
  display: flex;
} 

/* Hide nav */
.header-nav { 
  display: none;
}

/* Make nav visible */
.header--menu-open .header-menu {
  opacity: 1; 
  visibility: visible;
}

/* Delete if you want to keep the cart, social icons & cta */
.header-actions { 
 display: none;
}

/** Uncomment to remove buttons from the overlay menu **/
/*
.header-menu-cta {
  display: none;
} */


}

Further customizations

Coming soon