How to center your mobile menu (Bedford & Brine)
This tutorial is for the BRINE/BEDFORD theme of Squarespace, built with an older version. For more information, visit https://insidethesquare.co/themes
For most websites across any industry, mobile traffic is a big part of their site visitors. So making sure your site is easy to navigate on the tiniest of screens is key!
In this tutorial, I am showing you how to create a centered mobile navigation in Bedford and Brine theme templates, and how to make that navigation take up the whole screen.
If you use a Pacific, Five, or York theme template, check out this tutorial to learn how to align your centered mobile menu to the left or right.
Anywho, for you Bedford & Brine fans out there, be sure to watch the video and use the codes below!
BEDFORD
#sidecarNav nav { text-align: center; } .mobile-nav-open #sidecarNav {width: 100%; z-index: 1;}
BRINE
.Mobile-overlay-nav-item, .Mobile-overlay-folder-item { text-align: center;} .Mobile-overlay-menu {width: 100%; z-index: 1;}