How to change the width of the Mobile Menu

This tutorial will show you how to change the width of the mobile menu on Squarespace. Please note this code works on Squarespace 7.1 only.

Complexity: Easy

---

Step 1

Here, the mobile menu is full with and you make wish to reduce this.

---

Step 2

From your Squarespace account, go to the Custom CSS Editor. paste the code into the Custom CSS editor box.

/* Reduced Width Mobile Menu */

// Header menu width
.header-menu {
  width: 70vw;  
}

// Page transparency animation and Page opacity
#page {
  transition: opacity 1s;
}
.header--menu-open #page {
  opacity: 25%;  
}

// Header title width and font size 
.header-display-mobile .header-title-text {
   width: 60vw !important;  
  font-size: 1.5rem !important; 
}

// Menu alignment
.header-menu-nav-folder-content {
  justify-content: flex-start; 
  text-align: left; 
}
.header-menu-nav-folder:not(.header-menu-nav-folder--active) {
  display: none;  /* Do not edit */
}

// Button width
.header-menu-cta {
  width: 60vw; 
}

.header-menu-cta a {
  min-width: unset !important; /* Do not edit */
}

/* End Reduced Width Mobile Menu */

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ?“AS IS”. Other than as provided in this agreement, this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a developer.