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.
The Scroll on Header feature 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.
You have the flexibility to set your header to overlap with the content in the first row 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.
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:
-
Navigation
-
Multi-language
-
Social Icons
-
Click to Call button
-
Click to Email button
-
vCita
-
PayPal button
-
Facebook Like button
-
Images and Logos
-
Paragraph widget
-
Title widget
-
Buttons
A sticky header becomes static and stays in place when you scroll through pages in your site.
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.
-
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.
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 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.
Comments
0 comments
Article is closed for comments.