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

The Brine family has multiple templates, which share the same underlying structure and functionality. This guide applies to all these templates.


This guide explains some of the most common issues that may come up when using these templates.

Tip: For general information see our other Brine guides.

Why aren’t drop-down menus appearing in the footer navigation?

Folders don't display as drop-down menus in the Footer Navigation. Instead, you can display them as separate columns with the folder title as a header.

To add drop-down menus to your navigation, add the folder to the Primary Navigation or Secondary Navigation.

Why is my text 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. 

To remove the content inset, set the Content Inset tweak to 0 in the Main section of the Style Editor.

To learn more, visit Structure and style.

My site title looks different on mobile devices

Your template's customizable mobile styles allows you to set a different font style for your site title in desktop than in mobile.

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

My 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.

My header elements aren’t displaying properly

If too many elements are set to display in the same area of the header, they may overlap. You may see this behavior on tablets or smaller browser windows.

For best results, place each element in a different part of the header. Choose where each element displays in the Header: Layout section of the Style Editor.

My 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 the Width tweak in the Site section of the Style Editor.

You can also check Stretch in the Image Block Editor to ensure the image displays at the full width of the block. To learn more, visit Using the Image Block.

Tip: You can create full-bleed images on Index Pages by adding either a Regular Page section with a thumbnail, or a slideshow Gallery Page section. Learn more about the Index Page.

Why don't my blog posts have comments sections?

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

To enable comments for your site:

  1. In the Home Menu, click Settings.
  2. Click Blogging.
  3. Click Comments Settings.
  4. Check Enable Comments Globally. More comment settings will appear.

To learn more, visit Managing comments.

Why aren't my Index sections displaying at the height of my browser?

To set some or all content (Regular Page) sections to display at the height of the browser:

  1. In the Style Editor, scroll down to the Index: Page section.
  2. Use the Apply Minimum Height tweak to set which section are affected.
  3. Set the Minimum Height tweak to 100vh. 

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

  • Experiment with the Padding (Overlay Pages) and Padding tweaks 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 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.

My mobile styles aren't appearing on mobile

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

  1. From the Home Menu, click Design, then Style Editor.
  2. Scroll down to the Mobile section.
  3. Ensure your Mobile Breakpoint is set to 640 pixels or higher. 
  4. Click Save.

My Index Page mirrored border isn't the right color

The mirrored border takes its color from the main content area. To set this, use the Color tweak in the Main section. For more information and detailed steps, see the Index Page guide.

My parallax images are too cropped

In the Main: Overlay section, check Parallax Smart Crop. When this tweak is checked, the images crop the minimal amount required for parallax display.

My footer's middle blocks area disappeared

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. From the Home Menu, click Design, then Style Editor.
  2. Scroll to the Footer section.
  3. Choose Layout: Stacked.
  4. Exit the Style Editor.
  5. Add content to Footer Middle Blocks Area.
  6. Re-open the Style Editor, and choose Layout: Columns.
  7. Click Save.

My 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, adjust your site layout: 

  1. From the Home Menu, click Design, then Style Editor
  2. In the Site section, 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.

Can I disable the parallax scrolling effect?

Yes. To do this:

  1. Go to a page with a banner image.
  2. From the Home Menu, click Design, then Style Editor
  3. Scroll down to the Main: Overlay section.
  4. Uncheck the Enable Parallax tweak.
  5. Click Save and refresh the page.

This affects your whole site.

My banner image or video isn't displaying

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

  • Video banners on mobile. Set a mobile fallback image to display in its place.
  • Individual blog post, product, and event detail pages.
  • Cover Pages
  • Thumbnails added to the main Index Page. Instead, add thumbnails to content sections within the Index.

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

  1. From the Home Menu, click Pages.
  2. Hover over the page and click the gear-icon
  3. Click the Media tab.
  4. For banner images, click Image. For video banners, click Video.
  5. Ensure the image or video is there.
  6. Click Save and refresh the page.

If the banner still doesn't appear:

  1. From the Home Menu, click Design, then Style Editor.
  2. In the Main section, increase the Intro Padding (With Background Image) tweak.
  3. In the Main: Overlay section, ensure the Overlay Color isn't completely opaque.
  4. Click Save and refresh the page.

Header options aren't showing in the Style Editor

Some elements' tweaks only display in the Style Editor if those elements exist on your site. 

  • Navigation - These tweaks appear once you've added pages or links to your Primary Navigation or Secondary Navigation.
  • Shopping cart and customer account - These tweaks appear once you've created a Products Page. Express Checkout must be disabled.
  • Tag line - These tweaks appear once you've added a tag line.
  • Header: Bottom - This section appears once you've added one or more elements to the bottom half of the header in the Header: Layout section.
  • Header: Top - This section appears once you've added one or more elements to the top half of the header in the Header: Layout section.
  • Intro area and banner - These tweaks appear when you're on a page that supports them.
Was this article helpful?
8 out of 34 found this helpful