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

Your site header is where your navigation and title or logo display. The header looks the same throughout your site and plays a big role in how visitors navigate and interact with your content. It's positioned at the top of most templates.

This guide shows examples of different header features, and links to information on how to add and style them.

Tip: You can find information about your template's header in its Structure and style guide.

header-example.png

Header features

You can add these header features on any template, though the placement and design options vary.

Branding features

  • Logo - Replace your site title with a logo image to represent your brand and help visitors navigate to your homepage. To learn more, visit Adding a site logo.
  • Shopping cart - Shows the number of items in a customer's cart and leads to their cart and checkout page. To learn more, visit Adding products to your store.
  • Site title - Like a logo image, the site title helps visitors navigate to your homepage. To learn more, visit Adding a site title.

Navigation features

Additional features in some templates

These special header features are available in some templates.

Navigation features

  • Fixed header - Fixed headers stay in the same position at the top of the browser while you scroll down the page. See the information below.
  • Navigation overlay - In the Skye template family, when you click the ☰, it opens an overlay with your navigation links. Some mobile sites have an overlay.
  • Secondary navigation - A second set of navigation links in the header, which you can give a separate style. To learn more, visit Secondary and Footer navigation.

Branding and contact features

  • Business Information - Contact information from Business Information Settings can display in the header in some templates.
  • Social icons - Social icons encourage visitors to follow and connect with you on social media. To learn more, visit Displaying social icons.
  • Tag line - A short piece of text that tells visitors what your site is about. To learn more, visit Adding a tag line.

Design features

  • Background color - The header can have a different background color from the rest of your site in some templates.
  • Banner image or video - A banner image or video can display behind the header content in some templates.
  • Blocks area - Add custom content, like images, forms, and text, in some templates.
  • Buttons - A button creates a clear call to action. To learn more, visit Adding buttons to headers.
  • Search bar - Search fields help visitors find content on your site. In some templates, you can display a search bar in the header. To learn more, visit Adding search to your site.

Examples

The examples in this section show header features in different templates to help inspire you as you design your site.

This Brine example has many header elements:

labeled-brine.png

Wells displays header content in a sidebar:

wells-labeled.png

In the Skye family, the header content appears in an overlay when you click the menu icon:

labeled-skye.png

This Flatiron example shows a fixed header, and a drop-down menu created from a folder:

fixed-nav-supply.gif

Fixed headers

Fixed, or “sticky,” navigation stays in the same position at the top of the browser while you scroll down the page.

The table below shows which templates support fixed headers. Templates are grouped by family.

  • Except where noted, fixed headers display all your site's header elements (such as site title or logo and navigation links).
  • Navigation can't be fixed on mobile devices in many templates, to preserve space on smaller screens. In some cases, the navigation may be fixed on larger mobile devices, such as tablets.

Template

Desktop

Mobile

Adirondack

In Site Styles, check Always Show Nav.

When you scroll down, the header collapses and the site title replaces the logo. Learn more.

Not fixed

Avenue

Not fixed

Not fixed

Aviator family

Aubrey, Aviator

Navigation links only 

In Site Styles, use Info Page Layout to select either Offset or Business Card.

Not fixed

Bedford Family

Anya, Bedford, Bryant, Hayden

Index Pages only

The header reappears in a fixed position after you scroll past the first section. 

Not fixed

Brine family

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Not fixed

Top mobile bar can be fixed (Fixed Mobile Top). Bottom mobile bar is always fixed. Choose what displays in each

Farro family

Farro, Haute

Not fixed

Top mobile bar can be fixed (Fixed Mobile Top). Bottom mobile bar is always fixed. Choose what displays in each.

Flatiron

In Site Styles, select Header Position: Fixed.

Not fixed

Forte

Not fixed

Not fixed

Galapagos

Not fixed

Not fixed

Ishimoto

Not fixed

Not fixed

Momentum

Always fixed

Always fixed

Montauk family

Julia, Kent, Montauk, Om

Not fixed Not fixed

Native

Not fixed Not fixed

Pacific family

Charlotte, Fulton, Horizon, Naomi, Pacific

Navigation links only, and only on Index Pages set as the homepage.

In Site Styles, select Index Scroll Nav: Show On Scroll. The navigation reappears in a fixed position after you scroll past the first section. 

Not fixed

Skye family

Foundry, Indigo, Ready, Tudor, Skye

Always fixed

Can be transparent

Always fixed

Supply

Sidebar, always fixed

Not fixed

Tremont family

Camino, Carson, Henson, Tremont

Not fixed

Not fixed

Wells

Sidebar, always fixed

Not fixed

Wexley

Not fixed

Not fixed

York family

Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

Not fixed

Mobile bar can be fixed (Mobile Bar Position: Top Fixed or Bottom Fixed

Template header feature cheatsheet

To find template-specific information for each header feature, use the links in the table below.

Background color

Available in some templates

Banner image or video

Available in some templates

Blocks area

Available in some templates

Business Information

Available in some templates

Buttons

Available in some templates

Fixed header

Available in some templates

Folders Always available, but display varies by template
Logo

Always available, but display varies by template

Main Navigation links

Always available, but display varies by template

Navigation overlay 

 

Available in the Skye template family (Some mobile sites have an overlay)

Search bar

Available in some templates

Secondary navigation

Available in some templates
Shopping cart Always available, but some templates have styling options

Site title

Always available, but display varies by template

Social icons

Available in some templates

Tag line

Available in some templates

Create a page without a header

To add a page on your site where the header doesn't display, consider adding a Cover Page. Cover Pages have pre-styled layouts and don't include the site title, logo, navigation, and other header elements.

To learn more, visit Using Cover Pages.

cover_page_preview.png

Was this article helpful?
8 out of 15 found this helpful