Center Your Mobile Menu (Bedford & Brine)

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 week’s CSS 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, I didn’t forget about you! Check out this tutorial to learn how to align your centered mobile menu to the left or right.) When you’re ready, grab the copy and paste codes below, and be sure to Check out the tutorial video below for a quick walk through on how to install these codes on your site.


 
 

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

Ready for more mobile modifications?

Then today is your lucky day! I just put the finishing touches on my new Guide to Mobile Modifications. It contains over 20+ CSS codes specific for the mobile version of your Squarespace website. Get all the details here: