Troubleshooting Brine

Fixes for the common issues found in the Brine template family.

Last updated December 11, 2024

Here are some common issues with this template. Some of these are bugs or known issues. Although we still support Squarespace version 7.0, fixing bugs or issues is a lower priority for us while we focus on our current platform, version 7.1. You can move your version 7.0 site to version 7.1 using our update tool.

For general help, visit the Brine template guide, or review the list of Brine's templates.

Add a button to the header

Adding a button to the header is a great way to encourage a specific behavior, like driving traffic to a particular page.

There are a couple ways to add a button to a header:

  • Use the navigation: To create a call to action in your navigation, keep only one link in your secondary navigation, then style the secondary navigation as a button. Style your primary navigation in any other style.
  • Use the intro area: Create a call to action on individual pages by adding a button block to the intro area. Add text or other blocks to help highlight your message.

Banner image or video isn't displaying

In Brine, banners display on most page types, but they aren't supported for:

  • Individual blog post, product, and event detail pages.
  • Cover pages
  • Featured images added to the main index page. Instead, add featured images to content sections within the index.
  • Video banners sometimes won't display on mobile, depending on the visitor's connection speed and browser version. Set a mobile fallback image to appear when the video banner can't load.

If your page supports banners but isn't displaying one, here are some troubleshooting steps:

  1. In page settings, click the Media tab.
  2. For banner images, click Image. For video banners, click Video.
  3. Ensure the image or video is there.
  4. Click Save and refresh the page.

If the banner still doesn't appear:

  1. In site styles, scroll to the Main section.
  2. Increase the Intro padding (with background image).
  3. In the Main: overlay section, ensure the Overlay color isn't completely opaque.
  4. Click Save and refresh the page.

Banners aren't full-bleed

Banners typically display full-bleed, meaning they extend to the edges of the browser. If your banners aren't doing this, change your site layout:

  1. In site styles, scroll to the Site section.
  2. Choose Design: full width or Design: full background.
  3. In the Site: border section, ensure Show border is unchecked.
  4. Click Save and refresh the page.

Blog posts don't have comments sections

Blog comments are disabled by default in Brine, even if you enable comments on an individual blog post.

To enable comments for your site:

  1. Open the Blog preferences panel.
  2. Click Comments settings.
  3. Check Enable comments globally. More comment settings will appear.

To learn more, visit Blog comments and simple likes.

Change the month text on an events page calendar

In the events page calendar layout, the month name is centered above your calendar. The month text's font, size, and color follow the Heading 1 tweaks. To adjust these tweaks:

  1. Navigate to another page on your site that includes Heading 1 text.
  2. Return to the Website panel, then click Design, then Site styles.
  3. Locate the Heading 1 tweaks under Content: fonts and Content: colors.
  4. Click Save, then return to the events page to view your changes.

Columns are displaying in the wrong place

Single columns with a content inset wrap around floated blocks.

If the floated block is taller than the single-column content, it can interfere with the layout of multi-column content below. To adjust this, add a spacer block above the multi-column content.

KB Guide Image

Create a full-page background image

You can use an index page to create the effect of a single page with a background image:

  1. Create an index page.
  2. Add a content section.
  3. Add a featured image to the content section. This creates the background image.
  4. Add your page content to the content section. It will overlay the featured image.
  5. To extend the height, add extra spaces in a text block at the bottom.
page-background-brine.png

Create a slideshow banner

You can use an index page to create the effect of a slideshow page banner:

  1. Create an index page.
  2. Click Add section to create your first section.
  3. Select Gallery, then add multiple images to the collection.
  4. Add a gallery index section with multiple images as the first section.
  5. In the Index: gallery section of site styles, choose Layout: slideshow. (This affects all gallery index sections on your site.)
  6. In the Index: slideshow gallery section, ensure Gallery autoplay is checked.
  7. Add a content section below the gallery index section, and add your page content to it.
brine-slideshow-banner.gif

Disable parallax scrolling

To do this:

  1. Go to a page with a banner image.
  2. In site styles, scroll to the Main: overlay section.
  3. Uncheck Enable parallax.
  4. Click Save and refresh the page.

This affects your whole site.

Dropdowns don't display as drop-down menus in the footer navigation. Instead, you can display them as separate columns with the dropdown title as a column header.

To add drop-down menus to your navigation, add the dropdown to the primary navigation or secondary navigation.

KB Guide Image

Drop-down menu in header appears cut off

If your site's last navigation link on the right is a drop-down menu, the page titles may appear cut off. This usually happens on smaller screens (such as tablets) or when the site padding style tweak is reduced. To fix this:

  1. In the Pages panel, locate the dropdown that creates your drop-down menu.
  2. Move the dropdown to a different position in the Primary navigation section. As long as your dropdown isn't in the last position, the page titles will appear in full.

This happens if your footer background color is partially or completely transparent. On pages without featured images, the footer color displays over a white background. On pages with featured images, the footer background color displays over the color of your main content area.

To fix this:

  1. In site styles, scroll to the Footer section.
  2. Ensure Background color is completely opaque.

Sometimes when you delete all content from the middle blocks area, its annotation disappears in Columns view. To fix this, temporarily switch to the stacked layout:

  1. In site styles, scroll to the Footer section.
  2. Choose Layout: stacked.
  3. Exit site styles.
  4. Add content to Footer middle blocks area.
  5. Re-open site styles, and choose Layout: columns.
  6. Click Save.

Header elements aren’t displaying properly

If too many elements are set to display in the same area of the header, they may overlap on tablets or smaller browsers.

For best results, place each element in a different part of the header. Choose where each element displays in the Header: layout section of site styles.

KB Guide Image

Header options aren't showing in site styles

Some elements' tweaks only display in site styles if those elements exist on your site.

  • Navigation - Tweaks appear after you've added pages or links to your primary navigation or secondary navigation.
  • Shopping cart and customer account - Tweaks appear after you've created a store page. Express checkout must be disabled.
  • Tagline - Tweaks appear after you've added a tagline.
  • Header: bottom - This section appears after you've added one or more elements to the bottom half of the header in the Header: layout section.
  • Header: top - This section appears after you've added one or more elements to the top half of the header in the Header: layout section.
  • Intro area - Tweaks appear when you're on a page that supports intro areas.
  • Banner - Tweaks appear when you're on a page that supports banners.

Headings break to two lines at certain widths

In the Brine family, some headings will break to two lines when the browser is around 1400 pixels wide, and then will go back to one line at around 1120 pixels. This is part of the template’s design.

Icons and site title overlap on mobile

If the elements in your mobile navigation bar overlap, move one or more of them to the other navigation bar.

For example, to move the ☰ from the top to bottom navigation bar:

  1. In site styles, scroll to the Mobile: menu icon section.
  2. Change the Position to Bottom (left, right, or center).

Repeat these steps for any elements that overlap.

move-icons.png

Index sections aren't displaying at the browser height

To set some or all content sections to display at the height of the browser:

  1. In site styles, scroll to the Index: page section.
  2. Use Apply minimum height to set which sections are affected.
  3. Set the Minimum height to 100vh.

If your section isn't filling the height of the browser:

  • Experiment with Padding (overlay pages) and Padding until you achieve the look you like.
  • If your section content (including padding) is larger than the height of the browser, it will remain its original height.
  • The Mirror border tweak may also affect the display of first sections.

For gallery index sections:

  • Layout: slideshow - Check Use fixed height to manually set the height.
  • The height is set automatically by the number and size of the gallery's images.

Index page mirrored border isn't the right color

The color of Brine's mirrored border is the same as the page. To set this, use Color in the Main section of site styles.

Images aren’t displaying at site width

Image blocks don't follow the content inset. Instead, they display at the width of the site. Adjust the site width with Width in the Site section of site styles.

You can also check Stretch in the image block editor to ensure the image displays at the full width of the block.

Tip

Create full-bleed images in Brine's index pages by adding either a layout page section with a background image, or a slideshow gallery page section.

KB Guide Image

Mobile information bar is overlapped

If your site header is overlapping your mobile information bar, your visitors may have trouble exploring your site's content. This happens when the fixed mobile top style tweak and mobile information bar are both enabled. To fix this:

  1. In site styles, scroll to the Mobile: top section.
  2. Ensure the Fixed mobile top setting is unchecked.

If you prefer to leave the fixed mobile top tweak in place, you can remove the mobile information bar instead.

Mobile site scrolls horizontally

You may see horizontal scrolling if you've zoomed in on the page. Try refreshing your mobile browser to reset the zoom.

If this doesn't fix the issue, your site may have side padding that's less than 17 pixels, which can cause your mobile site to display wider than the browser window. To fix this:

  1. In site styles, scroll to the Site section.
  2. Ensure the Side padding is 17 pixels or higher.

Mobile styles aren't appearing

If your mobile style settings aren't appearing on mobile devices and device view, it could be that your site switches to mobile view only on very narrow browsers. To reset the width at which it switches:

  1. In site styles, scroll to the Mobile section.
  2. Ensure your Mobile breakpoint is set to 640 pixels or higher.
  3. Click Save.

Navigation bar is an unexpected color

If you adjust the opacity of the bottom navigation bar, its color when you scroll to the bottom depends on your settings. If there's a site border, it displays over that color. Otherwise:

  • If there's a page banner, it displays over the site background color
  • If there's no banner, it displays over the footer background color
mobile-banner-examples.png

Parallax images are too cropped

In the Main: overlay section, check Parallax smart crop. When this is checked, banner images crop the minimal amount required for parallax display.

Site title looks different on mobile devices

You can change how your site title displays based on device. Set a different font style for computer and mobile using your template's customizable mobile styles.

To keep your branding consistent across devices, select the same font style in the Mobile branding and Header branding sections of site styles.

Social icons in top header are the wrong color on index pages

If the first section in your index is a gallery, and you have Overlay header on first index gallery checked, social icons in your header automatically follow the Color (overlay) tweak in Social icons. This tweak only appears, however, when you set the Social position in Header: layout to one of the bottom header option. As a result, social icons positioned in the top header may be an unexpected color that you can't change.

To change this color tweak, temporarily set Social position in Header: layout to one of the bottom header options. After you change the color, move the social icons back to your top header.

Text is narrow and centered

When certain blocks are in a single column, they automatically inset to the middle of the page with white space on either side. This is called the content inset.

To remove the content inset, set Content inset to 0 in the Main section of site styles.

KB Guide Image
Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.