Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Brine mobile styles

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.

Navigation bars

Your site's header elements (such as your site title and navigation links) display in customizable top or bottom navigation bars.

Tips:

mobilebars.png

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:

  1. Open the Style Editor.
  2. Scroll to the Mobile: Search Icon section.
  3. 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:

  1. Ensure you've added at least one element to that bar.
  2. Scroll to the Mobile: Top or Mobile: Bottom sections.
  3. 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:

  1. Open the Style Editor
  2. Scroll to the Mobile: Branding section.
  3. Click the Position tweak and choose either Hide, Bottom Left, Bottom Center, or Bottom Right.
  4. Do the same for the other icons' sections (Mobile: Menu Icon, Mobile: Search Icon, Mobile: Cart, Mobile: Customer Accounts Link)
  5. Click Save.

Navigation links overlay

When visitors tap the ☰, the site links appear in an overlay.

space-nav-mobile.png

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

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.

Products

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.

Headings

On mobile, long headers will hyphenate and break to the next line. 

long-header.png

Page layout

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.
Was this article helpful?
3 out of 7 found this helpful