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. You can find information about your template's header in its Structure and style guide.

This guide is for version 7.0. To learn more about site headers in version 7.1, visit Building a site header in version 7.1.

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

• Navigation links - Links that direct visitors to your site content. To learn more, visit Adding pages to your navigation and Styling navigation.
• Folders - Folders create drop-down menus of navigation links. To learn more, visit Using folders.

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 Adding 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:

Wells displays header content in a sidebar:

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

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

Fixed headers

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

Use the table to see which of these template families support fixed headers.

• 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	Computer	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	Navigation links only  In Site Styles, use Info Page Layout to select either Offset or Business Card.	Not fixed
Bedford	Index Pages only The header reappears in a fixed position after you scroll past the first section.	Not fixed
Brine	Not fixed	Top mobile bar can be fixed (Fixed Mobile Top). Bottom mobile bar is always fixed. Choose what displays in each.
Farro	Not fixed	Top mobile bar can be fixed (Fixed Mobile Top). Bottom mobile bar is always fixed. Choose what displays in each.
Five	Not fixed	Not fixed
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	Not fixed	Not fixed
Native	Not fixed	Not fixed
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	Always fixed Can be transparent	Always fixed
Supply	Sidebar, fixed (scrolls if content is taller than the browser)	Not fixed
Tremont	Not fixed	Not fixed
Wells	Sidebar, always fixed	Not fixed
Wexley	Not fixed	Not fixed
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.