How to Style Your Squarespace Mobile Navigation

squarespace design

Jan 2

Want to spice up the mobile menu on your Squarespace site or just style it to match your branding? In this tutorial, I’ll show you how using the Style Settings and custom CSS!

Please note: This tutorial is only for Brine family templates in Squarespace 7.0. I recommend using Brine family templates because they offer the most flexibility.

How to Access the Style Settings

To access the mobile menu style settings:

Click on the horizontal line above the site window and select the smart phone icon.
Navigate to Design > Site Styles.
Type Menu in the search bar.

There are a few sections within the style settings that pertain to the mobile navigation, which I will outline below.

How to Change the Menu Icon

To change the mobile menu icon, scroll down to Mobile: Menu Icon in the style settings. You can change the position and color of the icon menu, along with the icon itself. Style options include two types of hamburger menus, a plus sign, and vertical or horizontal dots or squares.

How to Add a Search Icon

To add a search icon to the mobile menu, scroll down to Mobile: Search Icon in the style settings and select where you want the search icon to appear. You can also change the color.

How to Change the Menu Font

You can style the primary and secondary menus in the style settings. To style the primary menu, scroll down to Mobile Menu: Primary. To style the secondary menu, scroll down to Mobile Manu: Secondary. If you would like both menus to be styled the same, you can select Inherit Primary Nav Styles under Mobile Menu: Secondary.

You can change the font, font weight, font style, text size, letter spacing, line height, and more within the style settings.

If you want to use a custom font for your mobile menu, you will have to add some CSS. To do this, go back to Design and click on Custom CSS.

To change the primary navigation font, use this code:

body:not(.tweak-mobile-overlay-menu-primary-style-button) .Mobile-overlay-nav .Mobile-overlay-nav-item {
    font-family: YOURFONT;
}

To change the secondary navigation font, use this code:

body:not(.tweak-mobile-overlay-menu-secondary-style-button):not(.tweak-mobile-overlay-menu-secondary-inherit) .Mobile-overlay-nav--secondary .Mobile-overlay-nav-item {
    font-family: YOURFONT;
}

If you need help installing a custom font on Squarespace, watch this tutorial.

How to Change the Text Color

You can change the text color under Mobile Menu: Primary or Mobile Menu: Secondary. You can also convert your navigation items to buttons and adjust the styling of the buttons.