Header Element

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.

Header Settings.

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.

Image Repeat

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.

Image Position

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.

Image Size

This option allows you to set the size of the background image to a custom size, auto size, cover size, and a contained size.

Sticky Header

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.

Resize Header

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.

Transparent Header

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 ).