InsideTheSquare.co

View Original

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;}