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.
In Editor 2.0, the default header offers pre-made layouts, minimizing the risk of accidental changes. Users can choose layouts with limited actions, ensuring a focused and efficient design experience. An advanced editing option is also available for users seeking more customization, enabling the addition of extra widgets or elements beyond the pre-made layouts. For more information, see Advanced Header Editing.
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 the general size of the header. It is particularly useful in sites that have large headers and sites that are designed for long scrolling.
Note
The shrinking header is available on desktop and only for tablet when the top bar header layout is used.
To enable a shrinking header in Classic Editor:
-
Hover over the header, click Header, and then click Edit Design.
-
On the Shrinking Header tab, click the Enable shrinking header toggle. You have the following options:
-
Show navigation row only. Only display the row with navigation when the header shrinks. This feature is only applicable if there is more than one row in the header.
-
Background color. Change the background color of the shrinking header. Note that the row background color overrides the shrinking header background color.
-
More header colors on scroll. Specify colors for the text, selected link and hover, icons, button text, and more.
-
Logo size. Change the size that the logo or image shrinks to when the header shrinks (default is 66%).
-
Change logo on scroll. Select a logo to display on scroll.
-
Header spacing. Adjust the top and bottom padding of the shrinking header. You can change the header spacing per device.
-
Once the shrinking header is enabled, the following occurs:
-
The header spacing changes the top/bottom padding, and margin to 0. This does not apply to the rows inside the header.
-
Images in the header shrink to the percentage in the logo size bar (default is 66%).
-
To handle templates with a minimum height value in the header, the min-height of the header is set to auto.
-
If there are empty rows with columns, the columns span the entire space of the row.
-
The design properties override the shrinking header properties. For example, if you set a row background in the header, the row background displays over the shrinking header background.
-
Empty rows are displayed in the shrinking header.
-
If you cannot see your shrinking header, it may be because you do not have enough rows on your site to be able to scroll down on the site and trigger the shrinking header. If you only have one row on the page, the site will not scroll.
Not all widgets are compatible and appear in the shrinking header. If you have a widget in the header that is not compatible with the shrinking header, an empty column appears in place of the widget. You cannot edit widgets when the header is shrunk.
The following widgets are compatible and will display in a shrinking header for both Classic Editor and Editor 2.0:
-
Navigation
-
Multi-language
-
Social Icons
-
Click to Call button
-
OpenTable button
-
Click to Email button
-
vCita
-
PayPal button
-
Facebook Like button
-
Images and Logos
-
StoreCart
-
Paragraph widget
-
Title widget
-
Buttons
Note
This information is specific to the Editor 2.0, formerly known as the All-Flex Editor. To identify your current editor version, see How to Identify the Editor Version Your Site Uses.
The Scroll on Header feature in Editor 2.0 keeps essential navigation elements like the logo and menu visible at the top of the screen as users scroll down the page. It condenses logos and the general size of the header to save space and ensure easy access to navigation without being intrusive. Ideal for sites with large headers or those designed for extended scrolling, it enhances user experience by maintaining accessibility to key navigation options.
It is important to note that sticky header must already be enabled before the scroll on header may be enabled.
To enable scroll on header:
-
Hover over the header, and click Header.
-
Click Edit Design. The Header Design panel will appear.
-
Expand the Position section, and enable the Set as sticky header toggle if it is not already enabled.
-
Enable the Change header on scroll toggle.
-
Configure the following design options:
-
Padding. Set the headers initial padding-top and padding-bottom values (this is not specific to the sticky header option).
-
BG on scroll. Select the background color and opacity. Changes made on any screen size will affect the others.
-
Spacing on scroll. Define the top and bottom padding in px, %, vh, or vw. If you want to override the desktop screen size settings, you can make edits on tablet and mobile.
-
Logo size. Use the slider or text box to specify the size the logo shrinks to when the header shrinks on scroll. The default is 66%. Changes must be made on individual screen sizes.
-
Changes made in the Layout section of the Header Design Panel do not affect the Position settings.
In Editor 2.0, you have the flexibility to set your header to overlap with the content in the first of the page. This can create a visually appealing effect where the header seamlessly integrates with the content. If desired, you can set the header to overlap the first row. This needs to be enabled per page.
To enable overlap header with first row:
-
Hover over the header, and click Header.
-
Click Edit Design. The Header Design panel will appear.
-
Expand the Position section, and enable the toggle for Overlap 1st section on page.
-
(Optional) Configure a background color that will apply to all screen sizes.
A sticky header becomes static and stays in place when you scroll through pages in your site.
Note
Mobile headers are always sticky by default.
To enable a sticky header:
-
Hover over the header, click Header, and then click Edit Design.
-
On the Content tab, select Set As Sticky Header. If the option for Sticky Header is not available, you need to disable the toggle for Shrinking Header on the Shrinking Header tab.
There are several pre-designed flexible header layouts to select from. If you switch to one of the pre-designed flexible header layouts, you cannot switch back to a fixed header, you can only switch between other flexible header layouts. Switching layouts also removes existing content from the header section. We recommend creating a backup before switching layouts.
To change the header layout:
-
Hover over the header and click Header.
-
On the Design tab, select a new header layout. If you are switching to a sticky header, you first need to disable the toggle for Shrinking Header on the Shrinking Header tab.
To access the header design menu in Classic Editor, hover over the header, click Header, then click the Design tab.
To access the header design menu in Editor 2.0, hover over the header, click Header, then click Edit Design. The design panel will open on the side of the canvas. It contains the following design options:
-
Layout: Explore layout options that pair top navigation and hamburger styles consistently across screen sizes. While default layouts have limited capabilities, an advanced editing option enhances flexibility.
-
Spacing: Set margins and padding, with changes on the desktop affecting other screen sizes if their spacing remains unaltered.
-
Background: Choose background color or image, add borders or shadows, and witness changes seamlessly reflected across all screen sizes.
-
Position: Enable a sticky header with scroll-based changes. Sticky header activation on any screen size influences the behavior on others.
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. For more information, see Widgets: Image.
Note
This information is specific to the Classic Editor, and not relevant for Editor 2.0 (formerly known as the All-Flex Editor.) To identify your current editor version, see How to Identify the Editor Version Your Site Uses.
You can add an expandable menu on your desktop and tablet sites, making it easy to create modern sites that have great design flexibility. Choose from several expandable menu layouts, and customize them as you like, adding widgets, rows, and columns.
The expandable menu layout for mobile offers more customization and a way to display widgets in the header and a menu that is always visible.
You can change the layout of the header to a predefined layout that includes buttons, click to call, store cart, social icons, and more. You can add any widget to the expandable menu from the widgets panel.
To select and configure a header and expandable menu layout for desktop and tablet:
-
In the side panel, click Theme, then click Site Layout.
-
In the Desktop section, select the Expandable menu layout.
-
In the Tablet section, select the Expandable menu layout.
-
After selecting the expandable menu layout, a hamburger icon displays in your site header. Click the hamburger (
) icon to see the expandable menu.
-
On the Layout tab, click the existing layout to select a menu layout.
-
On the Style tab, you have the following options:
-
Enter from. Select Top or Side.
-
Entrance effect. Select Cover or Push.
-
Width. Move the slider to set the width of the expandable menu when expanded. The width of the menu is defined in percentages to fit all screen sizes.
-
Background. Configure the background color or image.
-
Close icon color. Select a color for the close icon, and close icon background color.
-
-
On the Spacing tab, change the padding.
The expandable menu can have up to 3 rows, and each one is fully customized. If the Desktop and Tablet have the same site layout (both expandable or both top bar), all customizations are the same for both. In case they are different, each device needs to be defined separately.
To edit location of the expandable menu in the header:
-
Hover over the header, click Header, and then select Edit Design.
-
In the Layout section, click Left or Right.
To select and configure a header and expandable menu layout for mobile:
-
Hover over the header, click the Header label, and then select Edit Design.
-
On the Layout tab, click the existing layout to select a menu layout. The mobile header offers layouts that display widgets such as social links, phone numbers, and more. The header layouts are fixed, so you cannot add new widgets, but you can edit or remove them. When you add a store or use the multi-language feature, more layout options are available that include the icons for the store shipping cart and the multi-language feature. If you do not have the store or multi-language enabled, these layouts do not appear.
-
Click Left or Right for the Menu icon position.
-
If you are not already, open the menu in mobile view. This allows the menu editor to open so you can edit the expandable menu.
-
On the Layout tab, click the existing layout to select a menu layout. The expandable menu offers multiple layouts that can display the social links, contact information and more. You can add any widget to the expandable menu, add columns, sort the columns to be next to each other or on top of each other. However, when you switch from one layout to another, it deletes all content that you added into the menu, taking only the widgets in the chosen layout.
-
On the Style tab, you have the following options:
-
Enter from. Select Top or Side. When Top is selected, move the height slider. When Side is selected, move the width slider.
-
Entrance effect. Select Cover or Push.
-
Note
Additional widgets are not able to be added to the mobile header.
Note
This information is specific to the Classic Editor, and not relevant for Editor 2.0 (formerly known as the All-Flex Editor.) To identify your current editor version, see How to Identify the Editor Version Your Site Uses.
To display header items above hero images, hover over the header, click Header, click the Design tab, then 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.
Note
For added flexibility, this setting applies only to the current page. To enable it on other pages, navigate to each page and follow the steps above.
Note
This information is specific to the Editor 2.0, formerly known as the All-Flex Editor. To identify your current editor version, see How to Identify the Editor Version Your Site Uses.
Advanced editing can be enabled for the header to access more customization options, such as the ability to add more widgets and elements. Changing the header layout (in the Header Design panel) will reset any changes that were made and will disable advanced editing.
Note
Because the headers sync across the screen sizes, it is recommended to check all screen sizes when using the advanced editing option.
When using advanced editing, it's recommended to check all screen sizes due to header synchronization.
To enable advanced editing:
-
Click on the Header tab.
-
Click Edit Design.
-
In the Layout section, click Enable advanced editing.
If you plan to display different elements on desktop and mobile (e.g., a button on desktop and an icon on mobile), utilize the hide/show feature for seamless transitions. To learn more, see Hide or Unhide Elements in Header (Editor 2.0).
To disable advanced editing and reset header, select a different layout:
-
Click the Header tab.
-
Click Edit Design.
-
Within the Layout section, click the arrow to access layout options.
-
Select a different layout to disable advanced editing and reset the header. Any changes made using advanced editing will be reverted and not saved.
To hide a header on a page:
-
Hover over the bottom of the header, and click Header.
-
Click Hide page header on, and select the device you want the header hidden on. In Editor 2.0, this hides the header on all pages.
To unhide the header:
-
In the side panel, click the Unhide Elements (
) icon under Settings.
-
Click the Hide icon on the footer, and select Yes to unhide the header.
Note
This information is specific to the Editor 2.0, formerly known as the All-Flex Editor. To identify your current editor version, see How to Identify the Editor Version Your Site Uses.
In Editor 2.0, the flexibility to hide or unhide elements within the header provides you with granular control over the visual components on different screen sizes whether you want to streamline your design or emphasize certain elements for specific devices.
Important points to be aware of:
-
Any element in the header, including the header itself can be hidden on any screen size. This can be done either on the canvas or in the Layers panel.
-
Elements included in the default header option can be hidden as well.
-
Elements that are hidden will show as disabled with a hide element icon (
-
The layers panel will only indicate elements hidden for the screen size you are currently on. For instance, if you are on desktop, it will only indicate elements hidden on desktop.
To hide header elements from the Layers panel:
-
In the top toolbar, click on the desired screen size you would like to hide the element on.
-
Click Layers from the side toolbar.
-
Click on the element you like to hide.
-
Click on the hide element icon (
To unhide header elements from the Layers panel:
-
In the top toolbar, click on the desired screen size you would like to hide the element on.
-
Click Layers from the side toolbar.
-
Click on the element you like to unhide (it will show disabled with the crossed out eye icon prior to being selected).
-
Click on the hide element icon (