If you have a Squarespace website, you’ve probably noticed that the navigation text on mobile can feel a little too big — especially if you’re going for a more minimal or refined look.
Unfortunately, there isn’t a built-in styling option to change this yet. But the good news is that you can easily change it with just a tiny bit of custom CSS.
How to change your mobile menu font size
Go to Website → Pages, scroll down to Custom Code, then click Custom CSS.
Paste in this code:
.header-menu-nav-item a {
font-size: 1rem;
}Then save your changes in the upper-left corner — and that’s it!
You can change 1rem to a different value until the menu feels just right for your website.
px or rem… what should you use?
If you’re new to CSS, you might be wondering what rem actually means or should you use px instead.
Here’s a simple overview:
px (pixels)
Pixels are a fixed unit. So if you set your font size to 16px, you’re directly telling the browser what size you want th text to be.
rem
rem is a relative unit. Instead of setting a fixed size, it’s based on your website’s root font size. For example, if the root font size is 16px, then 1rem equals 16px, while 1.25rem equals 20px (1.25 * 16px).
For this little customization, I’d recommend starting with 1rem and adjusting it from there. Try something like 0.9rem if you want your menu text a little smaller, or 1.1rem if you’d like it slightly larger.
I’d also recommend not going below 16px, so your navigation stays comfortable and easy to read on smaller screens.
