Align Your Mobile Menu Left or Right (Pacific, York, & Five)

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 change the alignment of your mobile menu to the left or the right for York, Pacific and Five theme templates. (If you use a Bedford or Brine theme template, I didn’t forget about you! Check out this tutorial to learn how to change the alignment of your mobile menu.) 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.


 
 

YORK

.mobile-primary-nav-links, .mobile-secondary-nav-links { text-align: left; margin-left:-100px}

PACIFIC

#mobileNavigation { text-align: left; padding-left: 50px}

FIVE

#mobile-navigation ul { text-align: left; padding-left:30px}

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: