How to center your mobile menu (Bedford & Brine)

CUSTOM CSSVERSION 7
Written By insidethesquare

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

insidethesquare


Grab my collection of custom codes for Squarespace: 
→ insidethesquare.co/css

Learn CSS for Squarespace in my free class:
→ insidethesquare.co/learn

https://insidethesquare.co
Previous

How to remove automatic hyphens on Squarespace mobile
Next

How to align your mobile menu left or right (Pacific, York, & Five)