The header element typically represents a container for introductory content like logos, or a set of navigational menu links. Similar to the section element it also uses a multi-column layout and by default you will get a header with two columns once you drop it in a specified zone.
To access the section settings, you can hover on the columns’ frame then click on the related tune icon to open its options.
A new panel on the right side will open with the list of settings showing the header options to set the width type, custom width & height size.
Additionally in its options you can enable the background image with styling options like Image Repeat, Image Position and Image Size.
There are several repeat style for your custom background image:
- No Repeat:- Background image does not repeat itself.
- Repeat X:- Background Image repeated itself horizontally
- Repeat Y:- Background image repeats itself vertically.
- Repeat X & Y:- Background image repeats itself both vertically and horizontally.
You can set the background image at any position of your choice. Positions available in the stax builder are: custom, center top, center center, center bottom, left top, left center, left bottom, right top, right center, and right bottom.
This option allows you to set the size of the background image to a custom size, auto size, cover size, and a contained size.
Stax builder lets you create a separate sticky header which can be different from your default header. Sticky header will stick to the top of your website upon scrolling down.
To create a sticky header:
- From the Header Settings, you can enable the “Sticky” option.
- You can then opt to style it with a background color and add box shadow options.
After you have enabled the sticky header, other settings become available and one of the cool features is the “resize header” option when scrolling down in order to maximize the view page area.
To create a resizable header:
- From the Header Settings > Sticky, enable Resize.
- You can set header height size and the offset.
Hide & Reveal Header
Hide & Reveal feature lets you hide the header when scrolling down and reveal it back when scrolling up.
To create a hide and reveal header:
- From the Header Settings > Sticky, enable Hide & Reveal.
- You can then enter the offset pixels of this feature.
Another cool feature is to make header transparent over page content. Enabling this option will set your primary header background to transparent and pull the page content to the top.
To create a transparent header:
- From the Header Settings > Sticky, enable Transparent.
- You can then set an offset when the transparent header becomes opaque while scrolling down (e.g: 200px ).