A comment on one of my recent Squarespace web design tutorials was “how do I change the font size on a mobile menu?”

Never one to not find a solution, I took a look at Squarespace to see if I could find the answer, only to discover it wasn’t as obvious or as easy as I thought it was going to be.

In fact, I ended up needing to put together a small piece of custom code. Keep reading to find out what that code is and how to add it to your Squarespace website.

Watch the video

Check out the YouTube video below 👇

To change the font size on a mobile menu on Squarespace, first ensure you’ve switched to mobile view within your edit dashboard (by selecting the mobile icon at the top of the page).

Then navigate to Website > Website Tools > Custom CSS and add the following code to your custom CSS panel:

.header-menu-nav-item a {
font-size: 15px;
}

You can then make the font size of your Squarespace mobile menu bigger or smaller by changing the px in the code. 

📩 Join the inner circle to get exclusive code updates

Once you’ve changed it to the font size you’re happy with, hit save and you’ll have changed the mobile menu font size on Squarespace. A quick and easy Squarespace trick- my favourite!

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

Want more?