How to customize your mobile menu in Squarespace (7.1 and 7.0 Brine)
With nearly half of all internet traffic now coming from mobile phones, optimizing your website for mobile users is crucial. Squarespace simplifies this with its responsive design, which automatically adjusts your site’s content and images to fit various devices. Additionally, the new Fluid Engine content editor allows you to tailor your mobile site separately from the desktop version.
Your website's navigation menu is key to guiding visitors, making it essential to ensure your mobile menu is just as user-friendly as the desktop version.
Customizing Your Mobile Menu in Squarespace 7.1
Accessing Mobile Menu Settings
Switch to Mobile View: Click the mobile icon on the far right.
Enter Edit Mode: Click the Edit button in the top left corner.
Edit Site Header: Hover over the website header until the Edit Site Header button appears, then click it.
Edit Design: Choose Edit Design to access layout options.
Editing Your Mobile Header Design
Change Header Layout:
Select the layout dropdown menu to choose from five different mobile menu layouts. Other settings like Drop Shadow and Border apply to both mobile and desktop views.
Customize Mobile Menu Layout, Colors, and Fonts:
After adjusting the layout, click anywhere outside the settings menu.
Click View Menu to preview the mobile menu.
Select Edit Design to adjust text alignment and link spacing.
Mobile Menu Colors:
Under the Color tab, select from sitewide Color Themes. To edit themes:
Go to Site Styles (paintbrush icon).
Click Colors.
Adjust MENU OVERLAY settings.
Mobile Menu Fonts:
The mobile menu font uses the Paragraph font set in Site Styles.
Go to Site Styles > Fonts > Paragraphs to customize it.
Note: Changes apply sitewide.
Customizing Font Size with CSS:
To change the font size, add this CSS to the Custom CSS panel under Website Tools:
css
.header-menu-nav-item a { font-size: 10px; }
Adding Elements to Your Mobile Menu
Elements like buttons, social media icons, and cart buttons can be added via the desktop view but will also appear on mobile.
Adding Elements:
Switch to Desktop view.
Click Edit Site Header.
Click +Add Elements and toggle on the desired elements.
Customizing Elements:
Toggle elements in desktop view.
Customize them by double-clicking each element icon in mobile view.
Customizing the Mobile Menu Button
Font: Go to Site Styles > Fonts > Assign Styles > Header Button.
Overall Style: Go to Site Styles > Buttons > Primary Button.
Editing the Mobile Menu Icon
Hover over the menu icon and click the pencil icon.
Choose a design and customize the line thickness. Enter a custom value using the three dots ("...").
Editing Site Title and Mobile Logo
Click on your site title or logo to edit.
Note: Changes affect the entire site (desktop and mobile).
Upload a Mobile-Only Logo:
Upload a different logo for mobile under the mobile logo image area.
Change Site Title Font on Mobile:
Customize in Site Styles > Fonts > Assign Styles > Mobile Site Title.
Additional Design Settings
Settings like Drop Shadow, Border, and Fixed Position affect both mobile and desktop views. Customize these in Edit Site Header > Edit Design:
Drop Shadow: Choose color, preset, or create a custom shadow.
Border: Adjust color, thickness, and position.
Fixed Header Position: Toggle fixed position and choose a style (Basic or Scroll Back).
Colors:
Choose from Adaptive, Gradient, or Solid styles under the Color tab. Customize background color, navigation color, opacity, and blur.
Customizing Your Mobile Menu in Squarespace 7.0 (Brine Template)
Accessing Mobile Menu Style Settings
Click the horizontal line above your site window and select the Mobile icon.
Navigate to Design > Site Styles.
Type "Menu" in the search bar to find mobile menu options.
Customizing Menu Icon
Scroll to Mobile: Menu Icon.
Adjust position, style, and color.
Adjusting Background Color
Go to Mobile Menu: General to change background colors.
Adjust which side the menu appears on (left or right).
Menu Font and Color
Customize fonts and colors under Mobile Menu: Primary and Mobile Menu: Secondary.
Convert navigation links to buttons and adjust their styles.
Experiment and Optimize
Feel free to experiment with the mobile menu styles to find the best look for your site. These changes will only show on mobile view, so you can tailor them specifically for mobile users. Happy customizing!
