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.
Tip: To change the navigation links, add, edit, delete, or rearrange pages in the Pages panel.
As you build your header, you can set site-wide styles and choose how the header looks on both computers and mobile devices.
Set global styles
To set your site-wide header styles:
- Click Edit in the top-left corner of your site preview.
- Hover over the header and click Edit Site Header. This opens the Global tab.
- To edit your site title or add a logo image, click Site Title & Logo. Logos appear in place of your site title. 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.
- To add a button, social icons, or a shopping cart icon, click Elements.
- To change the header colors, click Colors.
- To keep the header fixed at the top of your site, switch the Fixed Position toggle on. When the header is fixed, set the Fixed Header Style to Basic (always appears at the top of the site) or Scroll Back (appears at the top of the site when scrolling up).
- Click anywhere outside the editor, then hover over Done and click Save.
Set computer and mobile layouts
To set how the header appears on computers and on mobile devices:
- Click Edit in the top-left corner of your site preview.
- Hover over the header and click Edit Site Header. Click the Desktop icon.
- To change the layout, click Header Layout. Scroll to see all layout options and click one to preview it on your site.
- To set the width of the header content, click Full or Inset.
- Use the sliders to change the padding and spacing between elements.
- Click the Mobile icon. Your site preview will automatically switch to mobile view.
- To change the layout, click Header Layout. Scroll to see all layout options and click one to preview it on your site.
- To change how your menu appears when the links are expanded, click Overlay Menu. You can also change the menu overlay color.
-
To change how your menu appears when the menu is collapsed, choose a Menu Icon. Click anywhere outside the editor, then hover over Done and click Save.
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 on a computer match the header’s background color. You can also set the color of the mobile header overlay.
Make the background transparent
To make the header background transparent:
- Open the Global header settings.
- Click Colors.
- 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.
When the Fixed Position toggle is on and the first section has a background image, the transparent header behavior changes slightly. As you scroll, the header changes from displaying the first section's background image to displaying the first section's background color.
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:
- Open the Global header settings.
- Click Colors.
- Switch the Transparent toggle off, then choose a color theme.
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 color themes, visit Changing colors.
Set the mobile overlay color
Choose a color theme for the expanded navigation menu that appears on mobile devices:
- Open the Mobile header settings.
- Click Overlay Menu, then click Colors.
- Choose a color theme.
For more help with section color themes, 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) |
Page headers in version 7.0
In version 7.0, some templates support page headers. Page headers are page-specific content areas that appear above the main page content.
Page headers are available in these template families:
- Avenue
- Brine (called Intro areas)
- Farro (called Intro areas)
- Five
- Wexley
- York
To edit your page header:
- Hover over the top of the page and click Edit.
- Use blocks to add content like text and images.
- Click Save to publish your changes.
Page headers are separate from the main page content. It's not possible to move blocks from the page header to other content areas on the page.