How to Change the Font Size of Your Squarespace Mobile Menu

Have you ever wished you could tweak the font size of your mobile menu? Maybe the default size is a bit too small or a bit too large for your taste. Unfortunately, Squarespace doesn’t provide a built-in setting for this, but with a little CSS, you can adjust the font size to make your mobile navigation just right.

In this tutorial, I’ll show you how to change the font size of your Squarespace mobile menu step by step.

Watch the video

Check out the YouTube video below. 👇🏼

Why Customize Your Mobile Menu Font Size?

Customizing your mobile menu font size is more than just a design tweak. It can:

• Improve readability: Make your navigation easier for mobile visitors to use.

• Enhance usability: A well-sized menu ensures users can tap the right links effortlessly.

• Match your branding: Keep the font size consistent with your overall site style.

Step-by-Step Guide to Changing Your Mobile Menu Font Size

Step 1: Open the Mobile View

1. Go to your Squarespace website and log in to your dashboard.

2. Navigate to the page you want to preview and switch to Mobile View by resizing your browser window or using Squarespace’s preview tools.

3. Click the Hamburger Icon (menu button) to display the mobile menu.

Step 2: Access the Custom CSS Editor

1. From your dashboard, go to Website > Pages > Website Tools > Custom CSS.

2. Alternatively, use the search bar:

   • Click the Magnifying Glass Icon or press / on your keyboard to open the search.

   • Type CSS and select the Custom CSS editor.

Step 3: Add the CSS Code

Paste the following code into the Custom CSS editor:

.header-menu-nav-item a {

font-size: 20px;

}

Here’s what each part does:

• .header-menu-nav-item a: Targets the navigation links in your mobile menu.

• font-size: Specifies the size of the text. The default value is usually around 15px. You can adjust this value to make the text larger or smaller.

Step 4: Customize the Font Size

1. Experiment with different font sizes by changing the 20px value in the code.

   • For smaller text: Try 12px or 14px.

   • For larger text: Increase it to 25px or more.

2. Save your changes and preview your site on mobile devices to ensure the text size looks good.

Pro Tips for Mobile Menu Font Sizes

1. Test for Responsiveness: Always check how the font size looks on different screen sizes to ensure it doesn’t overflow or look cramped.

2. Stay Consistent: Use a font size that matches your overall mobile design and branding.

3. Keep Accessibility in Mind: Ensure your menu text is legible for all users, including those with visual impairments.

Wrapping Up

Adjusting the font size of your mobile menu in Squarespace is a quick and easy way to enhance your site’s usability and style. With just a few lines of CSS, you can create a navigation experience that’s both functional and visually appealing.

📨 Join my mailing list to get Squarespace tips & tricks right in your inbox

Your Designer

I'm Bryan, a Squarespace web designer and founder of Abound Web Design. I have worked with all types of businesses and organizations from preschools to publishing companies to chiropractic clinics and everything in between. If you want to discuss a potential project, you can email me at bryan@aboundwebdesign or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.