Change the Width of the Mobile Menu

What does this code do?

This code snippet will allow you to change the width of the mobile navigation menu.

Video Tutorial

Code Snippets

Copy and paste this code into Design > Custom CSS

Squarespace 7.0 (Brine Family)

/* Half Width Mobile Menu */
.Mobile-overlay {
  width: 60vw;  /*width of the header menu */
  background: #f7e7ce !important; /*background of mobile menu */
}
.Mobile-overlay-menu-main, .is-active-folder {
  background: #f7e7ce !important; /*background of mobile menu */
}
.is-mobile-overlay-active .Mobile-overlay-close {
  background: #f7e7ce; /* background color of close button */
  stroke: black; /* color of the X */
}
.Site {
  transition: opacity 1s; /* transparency animation */
}
.is-mobile-overlay-active .Site {
  opacity: 30%;  /* makes page transparent when mobile menu is open */
}

.Mobile-overlay-menu-main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* vertical alignment of navigation */
}

.Mobile-overlay-menu-main a {
  text-align: left !important; /* navigation text alignment */
}

Squarespace 7.1

/* Half Width Mobile Menu */
.header-display-mobile .header-title-text {
   width: 50vw !important;  /*width of the header menu */
  font-size: 1.5rem !important; /*site-title font-size */
}
.header-menu {
  width: 60vw;  /*width of the header menu */
}
#page {
  transition: opacity 1s; /* transparency animation */
}
.header--menu-open #page {
  opacity: 30%;  /* makes page transparent when mobile menu is open */
}

.header-menu-nav-folder-content {
  justify-content: flex-start; /* vertical alignment of navigation */
  text-align: left; /* navigation text alignment */
}
.header-menu-nav-folder:not(.header-menu-nav-folder--active) {
  display: none; /* hides non-active folder */
}

.header-menu-cta {
  width: 60vw; /* width of button */
}
.header-menu-cta a {
  min-width: unset !important;
  background: black !important; /* background color of the button */
}

Bonus: Menu on the Right in Squarespace 7.1

If you want the mobile menu to be on the right side of the screen in Squarespace 7.1, replace this code…

.header-menu {
  width: 60vw;  /*width of the header menu */
}

with the following code…

.header-menu {
  width: 60vw;  /*width of the header menu */
  left: unset;
}

Then you will need to hide the site title when the mobile menu is open or it sticks out from the mobile menu. You can do that by adding the following code to your CSS.

.header--menu-open .header-title-text {
  display: none;
}

Troubleshooting: My Button is Too Big

If you use a larger word in your button, it may extend outside of the width you have set for your mobile menu.

Replace this code

.header-menu-cta a {
  min-width: unset !important;
  background: black !important; /* background color of the button */
}

… with the following code.

.header-menu-cta a {
  min-width: unset !important;
  width: 80%; /*width of the button */
  padding: 4vw; /*spacing inside the button */
  background: black !important; /* background color of the button */
}

How To Use It

1. Copy and paste the code as indicated above.

2. Customize the size and color of the menu and their items.

3. You can use a word, rgb, or hex code for the color.