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

This guide reviews how to build your site header and display more 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.

Version_7.1_site_header.png

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:

  1. Click Edit in the top-left corner of your site preview.
  2. Hover over the header and click Edit site header. This opens the Global tab. 
  3. 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.
  4. To add or hide a button, social icons, shopping cart icon, or a customer accounts login, click Elements.
  5. To add header background styles, click Style. Learn more about the options below
  6. 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). 
  7. 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: 

  1. Click Edit in the top-left corner of your site preview.
  2. Hover over the header and click Edit site header. Click the Desktop icon. 
  3. To change the layout, click Header layout. Scroll to review all layout options and click one to preview it on your site.
  4. To set the width of the header content, click Full or Inset
  5. Use the sliders to change the padding and spacing between elements.
  6. Click the Mobile icon. Your site preview will automatically switch to mobile view. 
  7. To change the layout, click Header layout. Scroll to review all layout options and click one to preview it on your site.
  8. To change how your menu appears when the links are expanded, click Overlay menu. You can also set the link spacing and choose a color theme. Use the tweaks under Menu overlay to set the mobile-specific link, button, and background colors.  
  9. To change how your menu appears when the menu is collapsed, choose a Menu icon.
  10. Click anywhere outside the editor, then hover over Done and click Save.

To set the font and size of your site title on mobile:

  1. Open site styles.
  2. Click Fonts, then click Assign styles.
  3. Click Mobile site title, then click the drop-down menus to choose the font style and size. 

To learn more, visit Changing fonts.

Watch a video - Build a header

Header background styles

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 add background styles to the header to give your header a more distinctive look from the rest of your content, or help it blend with the rest of your site's branding. 

Tip: Folder drop-down menus on a computer match the header’s background color. 

To add a background style:

  1. Open the global header settings
  2. Click Style.
  3. Click the drop-down menu at the top of the editor to choose a background. Choose from Solid, Gradient, Theme, or Dynamic. Learn more about each option below
  4. Depending on the style you choose, customize the other settings that appear, which could include colors, a blur effect, borders, or a drop shadow. 
  5. To save your changes, click anywhere outside the editor, then hover over Done and click Save.

Style options

Choose from these background style options:

  • Solid - Choose a solid color background. Choose background and navigation colors from your site's palette, or choose custom colors. 
  • Gradient - Choose a gradient color that fades from dark to light from the top of the header. Choose background and navigation colors from your site's palette, or choose custom colors. 
  • Theme - Match the background color to one of your site's color themes
  • Dynamic - Make the background transparent. 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 if the first section uses section-specific styles or has a background image.

Keep in mind:

  • When the background is set to Solid or Theme, the header overlays the first section on the page. If the first section has a background image, the header covers some of the image.
  • The header will be solid if the first section is a blog, gallery, store, or events section.
  • When the background is set to Dynamic and the first section on the page is a gallery section, the header won't be transparent over the gallery images. Instead, the header displays the gallery section's background color.

Other style options

Depending on your chosen background effect, the editor might also show these style options:

  • Opacity - Use the slider to change the transparency of the color. 
  • Blur background - Switch the Blur background toggle on to blur any background content. Blurred backgrounds are more noticeable when the opacity is below 90%. Some browsers, including Internet Explorer and Firefox, don't support blurred backgrounds.
  • Border - Switch the Border toggle on to add a border around the header. Use the settings that appear to choose the color, position, and line thickness.
  • Drop shadow - Switch the Drop shadow toggle on to add a shadow effect around the header. Use the settings that appear to choose the color, how much it spreads, the distance, and add a blur effect.

Watch a video - Header styles

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 review 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, 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:

  1. Hover over the top of the page and click Edit.
  2. Use blocks to add content like text and images.
  3. 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.

Was this article helpful?
27 out of 201 found this helpful