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 your site.

This guide reviews how to build your site header and display additional features, such as a shopping cart icon, social icons, or a call-to-action button. The header is the same on all pages of your site. It’s not possible to create a page-specific header.

Watch a video

Build a header

If your site is on version 7.0, your header is part of your site's template. Skip to the 7.0 features section below to learn more. 

When you create your site, your header may already include your site title, navigation links, or other elements depending on the design you chose.

To build your site header:

1. Click Edit in the top-left corner of your site preview.
2. Hover over the header and click Edit Site Header.
3. To change the layout, click Header Layout. Scroll to see all layout options and click one to preview it on your site. 
4. To edit your site title or add a logo image, click Site Title & Logo. Logos appear in place of your site title. Even if you use a logo, add a site title too. Search engines use the title for search results and browser tabs, unless you add a separate SEO title.
5. To add a button, social icons, or a shopping cart icon, click Elements.
6. To change the header colors, click Colors.
7. To style padding and spacing between elements, or set the header to a fixed position, click Style.
8. Click Save.

To change the navigation links in your header, add, edit, delete, or rearrange pages in the Pages panel.

Header background

If your site is on version 7.0, your header background depends on your site's template. Skip to the 7.0 features section below to learn more. 

You can set the header background to transparent or a solid color. Folder drop-down menus match the header’s background color.

Make the background transparent

To make the header background transparent, switch the Transparent toggle on.

When this toggle is switched on, the header overlays the first section on the page and displays the first section's background color or image. This may change from page to page depending on if the first section uses section-specific styles or has a background image.

Note: If the first section on the page is a gallery section set to Full Bleed width, the header won't be transparent over the gallery images. Instead, the header displays the first section's background color. 

Make the background a solid color

To make the header background a solid color, switch the Transparent toggle off. You can use the default site-wide color theme or select a different color theme that only applies to the header.

When the Transparent toggle is switched off, the header overlays the first section on the page. If the first section has a background image, the header covers some of the image.

For more help with section background colors, visit Changing colors.

Header features in version 7.0

In version 7.0, the site header still appears on every page and includes the same elements as version 7.1, but its style depends on your site's template. Learn more about your template's header in its template guide.

Some templates have special features in the header. Use the links in this table to learn more:

Feature	Availability
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
Tagline	Available in some templates

Fixed headers in version 7.0

In version 7.0, some templates support fixed headers. This fixed, or “sticky,” navigation stays in the same position at the top of the browser while you scroll down the page. Use the table below to see which templates support fixed headers and how they display on a computer or a mobile device.

• Except where noted, fixed headers display all your site's header elements (such as site title or logo and navigation links).
• To preserve space on smaller screens, navigation can't be fixed on mobile devices in many templates. 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)