How to change the width of the Mobile Menu

The mobile menu in Squarespace 7.1 is functional by default, but what if you want to give it a more custom look? By changing the width of the mobile menu, you can create a more tailored user experience that better reflects your site’s layout, branding, or design needs. In this tutorial, we’ll show you how to adjust the mobile menu width using simple custom CSS. Please note this code works on Squarespace 7.1 only.

Table of Contents

• Why Change the Mobile Menu Width

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Change the Mobile Menu Width?

• Improve readability and user experience.

• Match your brand style or design layout.

• Prevent menu items from being cramped or hidden.

• Achieve a sleek sidebar menu look.

Complexity: Easy

---

Step-by-Step Instructions

Step 1

Here, the mobile menu is full width and you may wish to reduce this.

---

Step 2

From your Squarespace account, go to the Custom CSS Editor and 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 */

---

Key Takeaways

• Use classes to target only mobile screen sizes.

• Dynamically control menu width based on screen size.

• Custom CSS gives you full control to design the mobile menu experience.

FAQs

Will this affect desktop navigation?
This CSS only applies to screens smaller than 767px wide — typically mobile devices.

Can I make the mobile menu full screen?
Yes

---

---

Conclusion

Customizing the width of your mobile menu is a quick and easy way to improve mobile usability and create a more polished, branded design. Whether you're going for a sleek sidebar effect or full-width navigation, a little CSS goes a long way in Squarespace 7.1.

---

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, expressed 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.