How to Create a Non-Fullscreen Mobile Menu in Squarespace

Written By Andréa Montoya LLC

Modify the mobile menu layout with CSS to create a partial-width menu with a custom shadow effect in Squarespace:

Copy Code Example 
/* Modify mobile menu - NOT full screen */
    
.header--menu-open .header-menu {
opacity: 1; visibility: visible;
width: 200; 
margin-left: 20vw;
box-shadow: -5px 5px 15px #F26824} /*update color*/
Andréa Montoya LLC https://www.andreamontoya.co
Previous

Create a Pill Hover Effect in Squarespace Navigation
Next

Adjust the Hamburger Menu in Squarespace