Headers

The header is the part of your site that contains the logo and navigation. There are a lot of different ways to control the style of your header to help you create an appealing header for your site.

Header Types

There are two types of headers available— shrinking and sticky. Shrinking headers are available on desktop and on the top bar header layout on tablet. Sticky headers are available on all devices. Mobile headers are always sticky by default.

For more information about headers, see the following video:

Shrinking Headers

The Shrinking Header is a smaller version of the site header, enabling you to keep important navigation information fixed without distracting users as they scroll down a page and without taking up too much space. It acts as a sticky header feature but condenses the size of the logos and other widgets in your header. It is particularly useful in sites that have large headers and sites that are designed for long scrolling. The shrinking header is available on desktop and for tablet only on the top bar header layout.

Header Layouts

To change the header layout:

1. Hover over the header and click Header.
2. On the Design tab, select a new header layout. Using pre-designed headers helps save time in designing your site. You can always select a layout and then modify it afterward. If you are switching to a sticky header, you first need to disable the toggle for Shrinking Header on the Shrinking Header tab.

Sticky Headers

To make a header sticky, hover over the header, click Header, and on the Content tab, select Set As Sticky Header. The header becomes static and stays in place when you scroll through pages in your site. If the option for Sticky Header is not available, you need to disable the toggle for Shrinking Header on the Shrinking Header tab.

Hide Headers

To hide a header on a page:

1. Hover over the bottom of the header, and click Header.
2. Click Hide page header on, and select the device you want the header hidden on.

To unhide the header:

1. In the side panel, click the Unhide Elements () icon under Settings.
2. Click the Hide icon on the footer, and select Yes to unhide the header.

Header Logo

If the header contains one image, the logo of the site will be kept when moving between header layouts. In the case there is more than one image, or the logo is textual, the logo image is kept as in the layout. It is important to note that the headers between devices are not connected, so if you add a logo on desktop it is not automatically added to the other device types. The only exception is if the top bar header layout is used on tablet it will inherit any logo changes made on desktop.

If you delete the logo, re-add the image by dragging the image element back into the header, and set the link to go back to the homepage.

Other Header Options

To access the header design menu, hover over the header, click Header, and then click the Design tab.

To display header items above hero images, click Overlap first row. This gives your hero images more visibility and makes it easier to design great-looking, trendy sites. Keep the following in mind:

• For the header. Set the background color to transparent, or a color with opacity.
• For the first row. Use top padding that is equal to or similar to the height of the header.

When switching to a new header layout that contains social icons, the icons are displayed as defined in the content library. If there are no social links, the social icons are kept generic as in the layout.

Footer

The footer is the last section of your site, located at the bottom, and is the same on each page of your site. Footers are a convenient way to make sure your site visitors have access to important links like terms of service, privacy policy, or social media, regardless of the page they are visiting. In addition to legal links, the footer is a good place for copyright information and general contact information.

Customize the Footer

While the footer is its own section, the contents can be edited just like pages. By default, there will be at least one row. If there is only one row, the row will not have the option to be deleted.

To customize the footer section design:

1. Hover over the top of the footer, and click Footer.
2. On the Style tab, adjust the footer background by selecting a color or an image. You can also select a border style and thickness.
3. To adjust the padding or margin, click the Spacing tab.

Hide Footer

To hide the footer on a specific page:

1. Navigate to the desired page.
2. Hover over the top of the footer, and click Footer.
3. Click the Hide footer on this page toggle.

To unhide the footer:

1. In the side panel, click the Unhide Elements () icon under Settings.
2. Click the Hide icon on the footer, and select Yes to unhide the footer.