How to Customize Squarespace 7.1 Mobile Menus

The Squarespace 7.1 platform makes it very simple to edit mobile menu styles. In this article, I will walk you through how to edit your Squarespace mobile menu styles while also dropping some UX tips that will optimize your navigation for mobile devices.

Customizing the mobile menu with the site header editor

Open the site header editor

To get the best editing experience, switch the preview to the “Mobile Preview” by clicking the phone icon in the upper right-hand corner of the screen. To open the header style editor, hover over the header and click the “Edit Site Header” button that is revealed.

Switch to the mobile preview and click the “Edit Site Header” button in the header to open the header edit modal.

Editing global header styles that affect mobile views

Global header settings will affect both mobile and desktop header views, so in this section, I will be explaining which global settings affect the mobile menu. If you want to skip to the section explaining Mobile-Only settings, click here.

Global settings include the site title and logo, what elements you want to show in the header, the color theme & style, whether the position is fixed or not, and what type of fixed header you want (scroll back or basic). You can view and edit the global settings by making sure the globe icon is highlighted in the top right-hand corner of the modal.

Squarespace 7.1 global site settings

Site title & logo

Squarespace 7.1 lets you create a site title, default logo image, and a mobile logo image.

The site title is important for search engines, so this field should always be filled in. If the default logo image is empty, the site title will automatically display on both desktop and mobile views.

The default logo image in the first of the two below images will replace the site title if it is not empty.

The mobile logo will show in place of the desktop logo on mobile devices. If it is left empty, the default logo will display on mobile devices.

Site title and desktop logo image

Site mobile logo

Elements

The different elements you can add to your site header include a CTA button, social media links, a language switch toggle, and a cart icon. Each of these elements allows you to customize certain settings, such as the button text and link, the social media links, and the cart icon size. The language switch toggle which is used for creating multilingual sites will need to be edited in Language Settings.

Note that the mobile header will automatically hide the CTA button and the social links in the header. The CTA button will instead appear at the bottom of the overlay menu.

Header element customization options

The CTA button will not be shown in the header, but will instead be shown at the bottom of the overlay menu.

Style

You can edit your header color style and theme using the Style editor.

Squarespace 7.1 has 4 available header themes, including Solid, Gradient, Theme, and Dynamic. Each of these themes has its own set of customization options which you can see in more detail by selecting the different options.

Click the Theme select field to reveal the 4 different header styles.

Header style options include Solid, Gradient, Theme, and Dynamic.

Fixed header settings

Squarespace 7.1 also gives you the option to create a fixed header. If the “Fixed position” toggle is set to “Off,” the header will not be fixed to the top of the page. If it is set to “On,” the header will stick to the top of the page; you will also get the option to have a Basic fixed header, which will always stick to the top of the page, or a scroll back header, which will only appear at the top of the page if the user scrolls back up the page a certain amount.

Website industry experts Smashing Magazine conducted a study that indicated 100% of visitors polled preferred fixed header bars because of how easily accessible the menu was. This same study found that fixed headers are 22% faster to navigate, which is a significant percentage when you consider how short the human attention span is when browsing a website. If you want to conserve as much screen real estate on your site’s mobile views, I would recommend making your fixed header “Scroll Back,” this way the user can take advantage of the full height of the screen, and as soon as the user decides they want to scroll back to the top, the header will automatically reappear.

Edit fixed header styles

Editing mobile-only header styles

Now that we’ve learned about how to edit global site header styles for both mobile and desktop devices, let’s learn how to only edit the mobile menu settings. To view mobile menu settings, make sure to select the mobile phone icon in the upper right-hand corner of the edit modal.

Mobile menu style settings

Customizable settings include the header layout, the overlay menu, and the type of menu icon.

Header layout

The header layout refers to how header elements will be ordered on mobile views. The various layouts include the logo on the left with the menu and cart on the right; the logo in the middle with the cart on the left and menu icon on the right; the logo and the menu button on the right and the cart on the left; the logo in the middle with the menu button on the left and the cart on the right; and the logo on the right with the menu button and cart on the left.

Mobile header layout options

Overlay Menu

The overlay menu refers to the menu that opens when the mobile menu button in the header is clicked. You can change the text alignment, the link spacing, and the overlay menu background and link colors using your site theme color palette.

Pro Tip: For a more optimal mobile experience, make sure to increase the Link Spacing to at least 3.6vw - this will give your site visitors more than enough thumb room to click on one link. Want to know what other ways you can optimize your mobile menu navigation? Check out my article The 5 Features That Make an Exceptional Squarespace Mobile Menu where I provide advice and custom code snippets that will give your site visitors a seamless navigation experience when viewing your site on mobile devices.

Overlay menu styling options

Menu Icon

Squarespace 7.1 gives you 4 different menu icon options to choose from, including a hamburger menu with 2 lines, a hamburger menu with 3 lines, a hamburger menu that is aligned to the right, and a plus icon.

Menu icon options

Pro Tip: If you are interested in a CSS code snippet that will replace the menu icon with a much clearer “Menu” text button that will give site visitors more clarity, check out my tutorial How to Replace the Hamburger Menu Icon with Text in Squarespace.

Optimizing your mobile menu

Squarespace 7.1 already does a really great job of providing a user-friendly mobile navigation experience while giving you a lot of control over how your mobile header and menu look. However, as with any website builder platform, there is always room for improvement.

There are a few things you can do to vastly improve the mobile navigation of your Squarespace site. I’ve outlined these in detail and even provided some free code snippets that will help you achieve the topics addressed in my article The 5 Features That Make an Exceptional Squarespace Mobile Menu. These optimizations include visibly displaying 3-4 menu items in the mobile header, which can increase mobile interaction on your site by up to 30% and give your site visitors much more clarity when navigating your site, replacing the ambiguous menu icon with text of your choice, and more!

For tips and tricks on optimizing your navigation bar on both desktop and mobile devices, check out 16 Quick Tweaks for Your Navigation Bar in Squarespace.