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

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

 

The header at the top of your site sets the tone for your content and plays a big role in how visitors navigate and interact with your site.

In the Brine family, the header is divided into two sections: Top and Bottom. Within those sections, you can add the following elements to the left, center, or right:

The bottom half of the header also supports a background image, and an intro area where you can add your own unique content.

brine-topbottom.png

Tip: To experiment on your own, open the Style Editor and use the Header: Layout tweaks to change how it displays.

Set up the header

Use the Style Editor to set up your header:

  1. From the Home Menu, click Design, then Style Editor.
  2. Scroll to the Header: Layout section to choose where each element displays, or to hide any of them.

For example, you could:

  • Choose Branding Position: Top Center to display your site title or logo in the middle of the top header.
  • Change that to Branding Position: Bottom Center to move it to the bottom header.
  • Choose Search Position: Hide to hide the search bar from your header.

moving-header-elements.gif

Once you've added your elements, use the Style Editor section for each element to style it further. For example, scroll to the Header: Tag Line section to choose the font and color of your tag line.

Tips:

  • For best results, place each element in a different area of the header. Elements may overlap if there isn't enough space.
  • Some tweaks won't display until the elements they affect are added to your site. Learn more.
  • If you have multiple elements in the same area (for example, Bottom Center), choose whether they display horizontally or vertically.

Style the background

The top half of your header has its own background color. Use the Background tweak in the Header: Top section of the Style Editor to adjust the color.

The bottom half either displays a background color or image:

  • If the page has a banner, this displays as a background image for the bottom header.
  • If the page doesn't have a banner, the bottom header is the same color as your main site. Set this with the Color tweak in the Main section of the Style Editor.

Tips:

Change the header height

To set the height of the top header, go to the Style Editor and use the Padding tweak in the Header: Top section. 

For the bottom header, several options affect the height:

  • To add space above the elements, adjust the Padding tweak in the Header: Bottom section of the Style Editor.
  • For pages with intro areas, add space above and below the intro (below the elements) by adjusting the Intro Padding tweaks in the Main section. You can also add height to the bottom header on individual pages by adding extra line breaks to the intro.
  • For Regular Pages without banners, add a Spacer Block to the top of the page to add space below the elements.
  • For Index Pages, adjust the height of the top Index section.

Change the header width

The header elements display at the width of the main content area. You can adjust this by changing the site width and layout.

Banner images display full-bleed. To set their width, choose the Constrained layout. 

Stack header elements

Once you’ve added two or more items to the top or bottom header, you can choose whether those items display side by side or stacked. In the Style Editor:

  1. Go to the Header: Layout section and ensure there are two items in one area (for example, choose Branding Position: Top Left and Tagline Position: Top Left).
  2. Scroll up to the Header: Top or Header: Bottom section.
  3. Change the layout from Horizontal to Stacked with the Left Layout, Center Layout, or Right Layout tweaks.
Tip: Navigation links will still display horizontally, but you can stack the Main Navigation links above the Secondary Navigation links and vice versa.

brine-stacked.png

Add a background image

When you add a banner image or video to a page, it displays behind the bottom half of the header, creating a background image. Choose which header elements display over the banner in the Header: Layout section of the Style Editor.

Tips:

Set overlay styles

Use (Overlay) tweaks to give elements in the bottom header different styles when they display over background images. For example, you can set them to be black over the background color, but white over page banners.

To do this:

  1. Go to a page on your site with a banner.
  2. Open the Style Editor.
  3. Scroll down to the section for each element in your bottom header (for example, the Header: Search section).
  4. Use the (Overlay) tweaks to set the color and other styles. Elements will take these styles when displaying over a banner image.
Tip: Only the (Overlay) options will display when you're on a page with a banner. To style elements on pages without banners, exit the Style Editor, go to a page without banners, and re-open the Style Editor. You can also move the element temporarily into the top header to set its non-banner style, then move it back.

Add other content to the header

The Brine family supports a page-specific header area called the "intro." This is a great way to customize individual pages and introduce the page content to your visitors.

The intro is available on all pages except:

  • Regular Pages without a page banner. Instead, add content to the page.
  • Index Pages. Instead, add content to the top section.

To add content to the intro:

  1. Hover over the intro area, just above the page content
  2. Click Edit.
  3. Add and adjust content with blocks

Style the content in the Style Editor:

Tip: Intro areas are deleted from demo pages when you click Create. Edit the intro area to add your own content.

marta-structure11.gif

On pages with banners, the intro displays over the banner. This is a great way to add text to your banner images.

brine-structure12.png

Use the Intro Padding tweaks to adjust the padding above and below the content in the intro.

The intro follows the same content inset rules as the rest of your site. For example, single-column text will be inset on either side, but image blocks display at the width of the content area.

thorne-structure12.png

Hide the header

The header only displays when a site element, such as the site title, is displaying in it. You can set this in the Header: Layout section of the Style Editor:

  • To hide the whole header, choose each site element and select Hide.
  • To hide the top half of the header, move all site elements to the bottom header or hide them.
  • To hide the bottom half of the header, move all site elements to the top header or hide them. You may also want to remove your page banners.
  • Your mobile header elements will continue to display unless you style them separately.
  • If you sell products, we don't recommend hiding the shopping cart. Learn more.

The header displays site-wide, meaning the same header elements display on every page.

  • To create a standalone page that doesn't show the header, add a Cover Page.
  • To add extra content to just one page, add it to the intro.

Site title or logo

Your site title or logo (“branding”) tells the world who you are. Clicking the branding leads to your homepage. Once you've added a site title or logo, style it in the Style Editor:

  • Use the Branding Position tweak in the Header: Layout section to adjust where the branding displays, or to hide it.
  • The Header: Branding section adjusts the font and color of your site title, or the width of your logo. The Color (Overlay) tweak adjusts the color of the site title when it displays over a page banner. 
  • The same logo or site title displays on mobile, but you can give it a different style in the Mobile: Branding section.

Tag line

Adding a tag line is a great way to reinforce your brand. Tag line tweaks appear in the Style Editor once you've added a tag line to your site:

  • Use the Tagline Position tweak in the Header: Layout section to choose where the tag line displays, or to hide it.
  • Use the tweaks in the Header: Tag Line section to adjust the font and color of your tag line. The Color (Overlay) tweak adjusts the color of the tag line when it displays over a page banner. 
Note: Tag lines don’t display on mobile.

Pages you've added to the Main Navigation and Secondary Navigation display in the site header as links. Having two navigations gives you more options:

  • You can display them in different areas of your header.
  • You can give them separate styles.

Tweaks appear in the Style Editor once you've added one or more pages to either navigation. 

In the Header section:

  • Use the Position tweaks to adjust where the links display or to hide them. 

In the Header: Primary Navigation section:

  • Adjust the navigation Font and Color.
  • Style Folder drop-down menus.
  • Use the (Overlay) tweaks to adjust the color when the navigation displays over a page banner.
  • Use the Style tweak to affect how the navigation acts on hover (plain, fade, spotlight, or active) or style each navigation link as a Button

In the Header: Secondary Navigation section:

  • Check Inherit Primary Navigation Styles to give the Secondary Navigation the same style as the Main Navigation.
  • Uncheck Inherit Primary Navigation Styles to style it independently. It has the same style options as the Main Navigation.

In the Mobile: Primary and Mobile: Secondary sections:

  • Adjust how the navigation displays on mobile devices.

Tips:

Social icons

Social icons encourage visitors to follow and connect with you. Social icon tweaks appear in the Style Editor once you've connected one or more accounts:

  • Use the Social Position tweak in the Header: Layout section to adjust where the icons display, or to hide them.
  • Use the tweaks in the Social Icons section to set the icons' size, style, shape, and color.

social_icons.png

Shopping cart

The shopping cart icon shows customers how many items they’ve added so far, and takes them to checkout when they’re ready to order. In the Brine family, the shopping cart icon:

  • Can display as a cart, text, or bag.
  • Can be hidden.
  • Has separate mobile styles.

Shopping cart tweaks appear in the Style Editor once you've created a Products Page. Express Checkout must be disabled.

In the Header: Layout section:

  • Use the Cart Position tweak to choose where the cart displays, or to hide it.
  • If you Hide the shopping cart, customers can't access the checkout page. If you have a store on your site, we don't recommend hiding the cart unless you enable Express Checkout.

In the Header: Cart section:

  • Adjust the Font and Color of the icon or text. The Color (Overlay) tweak adjusts the color of the cart when it displays over a page banner.
  • Style the quantity circle with the Quantity Color and Quantity Text Color.
  • Use the Style tweak to style your cart three ways: as a shopping cart, shopping bag, or text.

In the Mobile: Cart section:

  • Choose how the cart displays on mobile devices.

In the Site section:

  • The Icons tweak adjusts the line weight of the shopping cart or shopping bag icons. This tweak affects both desktop and mobile display.

Tip: If your shopping cart isn't displaying:
  1. Ensure your site has at least one Products Page.
  2. Ensure Express Checkout is disabled.
  3. In the Header: Layout section of the Style Editor, click the Cart Position tweak and choose any Top or Bottom option.
  4. In the Header: Layout section, adjust the Color and Color Overlay tweaks.

Sign In / My Account link

After you enable customer accounts, you can adjust the style and position of the Sign In / My Account link.

In the Header: Layout section:

  • Use the Customer Accounts Link Position tweak  to adjust where the link displays, or to hide it.

In the Header: Customer Accounts Link section:

  • Use the Style tweak to display the link as text or an icon.
  • Change the Font and Color of the text.
  • Change the Color of the icon.

In the Mobile: Customer Accounts Link section:

  • Choose how the link displays on mobile devices.

The search bar enables visitors to search your site. When visitors enter a keyword and hit enter, a search page appears with relevant pages below.

In the Header: Layout section of the Style Editor:

  • Use the Search Position tweak to adjust where the search bar displays, or to hide it.

In the Header: Search section:

  • Adjust the Font and Color of your search bar
  • Style it with an underline, as a rectangle, or as just the icon. 
  • Use (Overlay) tweaks adjust the style when the search bar displays over a page banner.
  • Uncheck the Show Placeholder Text tweak to hide the "Search" text.
  • Use the Icon Scale tweak to set the size.

In the Mobile: Search Icon section:

  • Adjust how the search icon displays on mobile devices.

In the Site section:

  • The Icons tweak adjusts the line weight of the search icon. This tweak affects both desktop and mobile display.
Tip: Like any search engine, search results are based on the quality of the content on your site. For best results, add descriptive and accurate titles, descriptions, excerpts, tags, categories, and keyword-rich content across your site.

Set mobile styles

Header elements have their own mobile styles. For each element, go to the Style Editor and scroll down to its mobile styles section. For example, to change how your search icon displays on mobile, go to the Mobile: Search Icon section.

Tips:

  • Use Device View to see what your current mobile settings look like. 
  • The same logo or site title always displays on mobile, but you can give it a different style.
  • Tag lines don’t display on mobile.
  • Learn more about your mobile site.

Examples

Experiment with the layout to find the perfect arrangement for your site’s header. The examples below show different variations to help inspire you as you design your header.

Tip: Style Editor tweaks are shown in bold. To search for a tweak, open the Style Editor and press Ctrl+F (Command+F on a Mac). We've included the Style Editor section for tweaks that appear more than once.

Example 1

  • Page has a banner image
  • Intro Area has a Newsletter Block
  • Branding Position: Top Center
  • Tagline Position: Top Center
  • Center Layout: Stacked
  • Primary Nav Position: Top Left
  • Secondary Nav Position: Top Right

brine-header1.png

Example 2

  • Branding Position: Top Left
  • Primary Nav Position: Top Center
  • Cart Position: Top Right
  • Header: Cart > Style: Bag
  • Search Position: Bottom Center
  • Header: Top > Background (darker blue)
  • Main > Color (lighter blue)

brine-structure5.png

Example 3 

  • Page has a banner video
  • Social Position: Bottom Left
  • Branding Position: Bottom Right
  • Main: Overlay > Overlay Color
  • Tip: The top header doesn't show because it doesn't contain any elements.

brine-example-3.gif

Example 4

  • Primary Nav Position: Top Right
  • Secondary Nav Position: Top Right
  • Header: Secondary Navigation > Style: Button
  • Header: Bottom > Right Layout: Horizontal
  • Main: Color (gray)
  • Site: Border > Color (navy)
  • Since there isn't a banner image, the elements in the bottom header overlay the main content area 

brine-header4.png

Example 5

  • Branding Position: Bottom Center
  • Primary Nav Position: Bottom Center
  • Social Position: Bottom Center
  • Header: Bottom > Center Layout: Stacked
  • Social > Style: Knockout
  • Cart Position: Bottom Left
  • Cart Style: Bag
  • Search Position: Bottom Right
  • Header Search > Style: Icon Only
  • The Intro Area has a Button Block ("Shop Now")
  • Button Block (Large) > Style: Solid and Alternate Text Color (pink)
  • The top header doesn't show because it doesn't contain any elements.

brine-example5.png

FAQs

You may find these troubleshooting tips helpful:

Was this article helpful?
1 out of 4 found this helpful