To provide an optimized header for all screen sizes the default All-Flex header comes prebuilt with the essentials for each screen size. Designing and updating the header for all screen sizes is fast and as easy as a couple of clicks. The default option offers pre-made layouts with limited actions to aid in preventing accidental changes. This option also assists in increasing the efficiency of the site building process since there are fewer actions required.
There is an advanced editing option that can be enabled to allow for more customization, such as adding additional s or elements not included in the pre-made layouts (please see the Advanced Header Editing section for more information).
All Screen Sizes
The content (such as background and logo) are synced across the three screen sizes, for example if you change the logo on one screen size, it will update on the other two screen size as well.
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.
Tablet and Mobile
The slide-out menu on the tablet and mobile screen sizes sync with each other, so any changes made to either screen sizes will be reflected on the other as well, with the exception hiding elements.
Header Design
The Header Design panel is where many of the characteristics of the header can be edited, such as the background and spacing.
To access the Header Design panel:
Hover over the header, and click Header.
Click Edit Design. The Header Design panel will appear.
The Header Design panel options are:
Layout. Click the arrow to see the layout options.
For consistency between the screen sizes, the layout options pair the top navigation (desktop) and hamburger styles to offer similar options, for instance if the top navigation layout only has the logo and the navigation, the hamburger layout header will only include the logo and the hamburger menu.
To enhance efficiency, the default layouts have limited capabilities (for instance, additional s are not able to be added and columns are not able to be rearranged). There is an advanced editing option available that will add more capabilities.
Advanced editing can be enabled here.
Any header customizations that were made will reset and will not be saved when switching to another layout (this applies to any and all edits made to the header, with the exception of the logo).
Selecting a different layout will change the layout for all screen sizes.
Spacing. Set margins and padding. Changes made on the desktop screen size will affect the other screen sizes if their spacing was not changed. Spacing changes on the tablet and mobile screen sizes will only affect the screen size that was changed.
Background. Select a background color or image and add a border or shadow. Changes made on any screen size will affect the others.
Position. The header can be set as a sticky header and change on scroll. Enabling the sticky header on any screen size will affect the others. To learn more about change on scroll, see Header on Scroll for All-Flex.
Advanced Header Editing
Advanced editing can be enabled for the header to access more customization options, such as the ability to add more s and elements. Changing the header layout (in the Header Design panel) will reset any changes that were made and will disable advanced editing.
Because the headers sync across the screen sizes, it is recommended to check all screen sizes when using the advanced editing option.
To enable advanced editing:
Click the Header tab.
Click Edit design.
In the Layout section, click Enable advanced editing.
To disable advanced editing and reset the header, select a different layout:
Click the Header tab.
Click Edit design.
Click the arrow to see the layout options.
Select a different layout. Any changes made with advanced editing will be undone and will not be saved.
If you want to add a button on desktop and an icon on mobile, the button can be hidden on mobile, an icon can be added (on mobile), and then hidden on desktop.
Elements can be hidden either on the canvas or in the layers panel.
Hidden Elements
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 crossed out eye 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 elements in 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 crossed out eye icon.
To unhide elements in 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 crossed out eye icon.
Header Limitations
All-Flex is an ongoing development. While we are continually improving upon it, there are features that are still in development (most will be added over time, though they do not currently have timelines):
The header is limited to one section (additional sections can not be added, though there is one layout option that is built with 2 sections). This is the case for all screen sizes.
Access to the HTML/CSS for the header (this is a permanent limitation due to the technology flex uses).