Headers

Your header lives at the top of your site and contains your navigation and logo. Within the site builder you can define the type of header and customizing the design.

Header types

There are three header types: fixed, flexible and sticky (or persistent).

FLEXIBLE HEADERS

You can create a flexible header by turning it into a row; this will allow you to add widgets as it will behave like a row.

Note: if you change your header into a row, you can’t change it back to a fixed style.

FIXED HEADERS

A fixed header contains a logo, navigation, and any other elements, but it is locked for editing and widgets can’t be added.

SHRINKING HEADERS

You can add a shrinking header to fix important information in place, but minimize the distraction to visitors as they scroll down a page of your site. The shrinking header acts as a persistent feature, and as the user scrolls past the header height, logos and widgets will shrink.

STICKY HEADERS

A sticky – or persistent – header remains in place as a visitor scrolls down a page. You can set this by clicking on the header icon and selecting “Set As Sticky Header.”

Header Layouts

Within the header design options, you can select a predesigned layout to save time in your design and you can make edits as desired. Switching to one of these will convert fixed headers into flexible ones and they can’t be changed back.

Note: adding a predesigned layout will remove existing content; ensure you save a backup.

Hide Header

Click the Header tab to open the menu options for the header. The option “Hide on this Page” will appear where you can hide the header in desktop, tablet, or mobile.

Customizing

You can customize your header from the design menu. Simply click the header, select “Edit Design” and customize your headers as desired.

FAQ

ADDITIONAL CONTROL

If you want maximum control over your header, you should choose the flexible header style.

MAINTAINING ELEMENTS WHEN SWITCHING

• Logo: the effect on the logo may differ – if the header contains one image, the logo will remain, if there are multiple images, the logo will appear as defined in the layout.
• Social Icons: if there are existing icons, they will remain the same, and if there aren’t, they will appear as defined in layout.

MOBILE HEADER

• Editing: If you are unable to add or delete elements in the mobile layout, your header is fixed and can’t be customized. For flexible headers in mobile, however, you can change the content by clicking into the mobile view, clicking the content, and selecting edit.
• Logo: If you have trouble editing the logo, click on the header icon and select “Edit Design.”

Note: some views have a max width for the logo. You can change the navigation layout to solve this.