The Squarespace 7.1 mobile menu uses .header-menu and transitions between hidden and visible states. By default the animation is basic, but you can add a slide-in from the right or a fade effect with CSS transitions.
Target the .header-menu-nav-wrapper and set a transform/opacity starting state, then transition to the visible state when the menu is open. The menu open state is indicated by the body class .header--menu-open.
.header-menu-nav-wrapper {
transform: translateX(100%);
opacity: 0;
transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
opacity 0.3s ease;
}
.header--menu-open .header-menu-nav-wrapper {
transform: translateX(0);
opacity: 1;
}
.header-menu-nav-item {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.header--menu-open .header-menu-nav-item {
opacity: 1;
transform: translateY(0);
}
.header--menu-open .header-menu-nav-item:nth-child(1) { transition-delay: 0.1s; }
.header--menu-open .header-menu-nav-item:nth-child(2) { transition-delay: 0.15s; }
.header--menu-open .header-menu-nav-item:nth-child(3) { transition-delay: 0.2s; }
.header--menu-open .header-menu-nav-item:nth-child(4) { transition-delay: 0.25s; }Generate this with our Animation GeneratorTry it free →
