The Brine family has multiple templates, which share the same underlying structure and functionality. This guide applies to all these templates.
Because Squarespace templates are built with responsive design, your site adjusts on mobile devices to better fit the format of that device.
The Brine family has mobile-specific tweaks for an extra layer of customization, including:
Tip: Use Device View to preview your mobile site.
Your site's header elements (such as your site title and navigation links) display in customizable top or bottom navigation bars.
- Each navigation bar appears once you've added at least one icon to it.
- To choose whether the top bar is fixed at the top or scrolls up with the page, use the Fixed Mobile Top tweak in the Mobile: Top section of the Style Editor.
- The bottom bar is always fixed.
- You can hide one or both bars.
- You can set the color for each navigation bar and choose what icons display in them.
Add and style navigation bar icons
Your site's header elements have separate mobile settings from desktop view. They display as icons in the mobile navigation bars.
To add, style, move, or hide these icons, go to the Style Editor and use the tweaks in the Mobile section for that icon.
For example, to add a search icon to the left side of your top navigation bar, you would:
- Open the Style Editor.
- Scroll to the Mobile: Search Icon section.
- Choose Position: Top Left.
Here's how to style each header element:
- Site title or logo (“branding”) - Go to the Mobile: Branding section. Learn more about mobile branding.
- Tag line - Tag lines don't display on mobile in this family.
- Navigation links - Navigation links display behind a menu icon. Style this with the Mobile: Menu Icon section. When tapped, the links appear in a customizable overlay.
- Social icons - Social icons don’t display on mobile in this family.
- Shopping cart - Go to the Mobile: Cart section.
- Customer accounts link - Go to the Mobile: Customer Accounts Link section.
- Search bar - Go to the Mobile: Search Icon section. When tapped, the mobile search icon opens an overlay with a search bar. The search overlay displays over the site background color.
Tip: Learn how to style your desktop header elements.
Set the navigation bar colors
You can set the color for either navigation bar in the Style Editor:
- Ensure you've added at least one element to that bar.
- Scroll to the Mobile: Top or Mobile: Bottom sections.
- Use the Background tweak to set the color for that bar.
If your navigation bar is partially transparent, it displays over a color when you've scrolled to the top or bottom of the page. If the site has a border, it displays over the border color. Otherwise:
- If the page has a banner, it displays over the main content area's background color.
- If there's no banner, it displays over the footer's background color.
- Learn how to set these background colors in Brine structure and style.
Hide the navigation bars
To hide either navigation bar, remove its icons with the Position tweaks in the Style Editor.
- To hide the top bar, move all icons to the bottom bar or hide them.
- To hide the bottom bar, move all icons to the top bar or hide them.
- To hide both bars, hide all icons.
For example, to hide the top bar:
- Open the Style Editor
- Scroll to the Mobile: Branding section.
- Click the Position tweak and choose either Hide, Bottom Left, Bottom Center, or Bottom Right.
- Do the same for the other icons' sections (Mobile: Menu Icon, Mobile: Search Icon, Mobile: Cart, Mobile: Customer Accounts Link)
- Click Save.
Navigation links overlay
When visitors tap the ☰, the site links appear in an overlay.
- Use the Mobile: Primary and Mobile: Secondary sections to style the links.
- Use the Menu Color tweak in the Mobile Menu: General section to style the background color.
- Use the Close Button tweaks in the Mobile Menu: General section to adjust the X that collapses the menu.
- There is a space between the Main Navigation and Secondary Navigation links.
Set the breakpoint
Choose the browser width where your header will switch to mobile view with the Mobile Breakpoint tweak. The default is 640 pixels.
Site title and logo
Although you can style it differently in mobile, the same site title or logo displays on both desktop and mobile.
For example, you:
- Can - Give your mobile site title a different color and font.
- Can - Display your search bar on mobile but hide it on desktop.
- Can't - Display a site title on desktop and a logo on mobile.
Banners display normally on mobile in most cases.
- Parallax scrolling works on mobile.
- Video banners don't display in mobile. Set a mobile fallback image to display in place of the banner video.
- See our troubleshooting tips for mobile banner and background image cropping issues.
The Brine family uses the Advanced Products Page, which has separate color options for item titles, prices, and sale prices on mobile display.
- To adjust these colors, use the (Mobile) tweaks in the Products: Details section of the Style Editor. These tweaks only appear when you've chosen Position: Overlay for your desktop site.
- Currently, Quick view and Product Image Zoom aren't available on mobile.
To learn more, visit Styling the Advanced Products Page.
On mobile, long headers will hyphenate and break to the next line.
In general, content stacks vertically on mobile. Product items display in a grid.
For more information, visit How will my site appear on a mobile device?
Note: Unlike some other Squarespace templates, you can’t disable mobile styles for these templates. This ensures your site always follows best practices and stays mobile-friendly.