Style the menu and other elements that appear at the top of every page on your site.

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.

Note: It’s not possible to create page-specific headers or remove elements on certain pages. However, if your site is on Version 7.1, you can hide the header on certain types of pages.

Watch a video - Build a header

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.

Navigation links

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

1. Click Edit in the top-left corner of your site preview.
2. Hover over the header and click Edit site header.
3. Click the navigation links, then click the pencil icon.
4. Click and drag the navigation links to put them in your preferred order.

Please note that rearranging the links here also rearranges them 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 site-wide header design

To set your site-wide header design:

1. Click Edit in the top-left corner of your site preview.
2. Hover over the header and click Edit site header.
3. To edit your site title or add a logo image, click your site title or logo, then click the pencil icon. Logos appear in place of your site title. If you use a logo, ensure you add a site title too. Search engines use the title for search results and browser tabs, unless you add a separate SEO title.
4. When done editing your site title and logo, click anywhere outside the editor to continue editing your site header.
5. To add or hide a button, social icons, shopping cart icon, a customer accounts login, or a language option, click Add elements, then switch the toggles off or on. Click anywhere outside the editor to continue editing your site header.
6. Click Save to save your changes and keep editing, or Exit then Save to close the editor.

Set computer layout

To set how the header appears on computers:

1. Click Edit in the top-left corner of your site preview.
2. Hover over the header and click Edit site header. To ensure you’re in desktop view, in the top-right corner, click the Computer icon
3. To change the layout, click Edit Design. Click the current layout to review all options. Click a layout 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 links, social icons, and elements.
6. Choose from the following effects, and keep in mind that edits to these will apply to both computer and mobile displays:
   • 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. 
   • 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.
7. To add header background styles, click Edit design, then the Color tab. Changes here will apply to both computer and mobile displays. Learn more about the options below.
8. To keep the header fixed at the top of your site, click the Design tab and switch the Fixed position toggle on. When the header is fixed, you can 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). Depending on the device, fixed headers of either type may expand or contract slightly when scrolling. Changes here will apply to both computer and mobile displays.

Set mobile layout and styles

1. To switch to mobile view, in the top-right corner of your screen, click the Mobile icon. Your site preview automatically switches to mobile view.
2. To change the layout, click Edit design. Click the current layout to review all options. Click a layout to preview it on your site.
3. Choose from the following effects, and keep in mind that edits to these will apply to both computer and mobile displays:
   • 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. 
   • 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.
4. To keep the header fixed at the top of your site, click the Design tab and switch the Fixed position toggle on. When the header is fixed, you can 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). Depending on the device, fixed headers of either type may expand or contract slightly when scrolling. Changes here will apply to both computer and mobile displays.
5. To add header background styles, click Edit design, then the Color tab. Changes here will apply to both computer and mobile displays. Learn more about the options below.
6. To change how your menu appears when the links are expanded, click View menu, then Edit design. You can set the alignment, link spacing and choose a color theme. Use the tweaks under Menu overlay to set the mobile-specific link, button, button text, and background colors.
7. To change how your menu appears when the menu is collapsed, choose a Menu icon.
8. Click Save to save your changes and keep editing, or Exit then Save to close the editor.

Tip: Add a separate logo image for your mobile header to create a unique look for mobile visitors. To learn more, visit Adding a site logo.

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.

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: The dropdown background on a computer matches the header’s background color.

To add a background style:

1. Click Edit in the top-left corner of your site preview.
2. Hover over the header and click Edit site header.
3. Click Edit design, then click the Color tab.
4. Select a background style from the dropdown menu at the top of the editor. Choose from Solid, Gradient, or Adaptive. Learn more about each option below.
5. Depending on the style you choose, customize the background style settings like colors, blur effects, and opacity.
6. Click Save to save your changes and keep editing, or Exit then Save to close the editor.

Style options

Choose from these background style options:

• Solid - Choose a solid color background. You can choose custom colors, use your site’s palette, or match one of your site’s color themes.
• Gradient - The header overlays the first section on the page. Choose a gradient color that fades into the first section's background. Choose background and navigation colors from your site's palette, or choose custom colors.
• Adaptive - Make the background transparent. The header overlays the first section on the page and displays the first section's background. 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, the header overlays the first section on the page. If the first section has a background image or video, the header covers some of the background.
• When the background is set to Adaptive or Gradient and the first section on the page is an auto layout, blog, events, gallery or store section, the header won't be transparent over any images. Instead, the header displays the first 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%.

Note: Some browsers, including Firefox, don't support blurred backgrounds.

Watch a video - Header styles

Add a button to a header

Adding a button to a header puts your call to action front and center, encouraging visitors to click it right away. Your options depend on your site's version.

Hide the header

To help draw attention to your content, or to encourage your visitors to take an action, you can hide the header on certain pages.

Hiding the header is only available for blank and layout pages, and blank and layout pages in member sites. Collection pages such as blog, store, portfolio, and events don't have this option.

To hide the header:

1. Open the Pages panel.
2. Hover over a page title, then click next to the title.
3. Click Navigation on the page settings tab.
4. Use the toggles to turn off Show Header.

Repeat these steps for every page where you'd like to hide the header. 

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
Dropdowns	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.