How to add a header template oxygen

How to add a header template oxygen Header Builder makes it clean to create responsive, sticky, multi-row headers.

Add a Header Builder for your web page from +Add > Helpers > Header Builder.

POSITIONING ELEMENTS

Each Header Builder detail is made from more than one Header Row factors. Each Header Row detail is split into 3 subsections – left, middle, and proper.

You can function the factors internal every header row via way of means of dragging them with the mouse. You also can use the Structure panel for positioning.

MULTIPLE ROWS How to add a header template oxygen

To upload some other Header Row to a Header Builder, prompt the Header Builder after which click on Primary > Add Another Row withinside the Header Builder settings.

STICKY HEADERS How to ad

To stick a header to the pinnacle of the web page in order that it stays on the pinnacle of the browser viewport whilst the consumer scrolls down the web page, observe those steps:

Select Header Builder withinside the Structure panel at the proper-hand aspect.
Click Sticky withinside the left panel.
scroll distance – how a long way the consumer ought to scroll earlier than the sticky header is shown.
sticky historical past colour – a historical past colour in an effort to be implemented to the Header Builder most effective whilst it’s far sticky – beneficial for making obvious headers overlaid on a hero historical past picture sticky.
sticky above – the header will most effective be sticky above this display screen width – used to cover the sticky header on cell devices.
sticky container shadow – CSS code to personalize the shadow displayed under the header whilst it’s far sticky.
sticky header z-index – outline a z-index in your sticky header – beneficial to save you different factors at the web page from acting on pinnacle of the sticky header whilst scrolling.
fade in sticky – test this container to apply a fade animation whilst the header will become sticky.
Each man or woman Header Row in a Header Builder detail may be configured to show or now no longer show relying at the Header Builder`s sticky kingdom. To alternate those settings, choose a Header Row withinside the Structure panel at the proper aspect. In the Properties Pane at the left, below the Primary tab, you may see a segment known as Sticky Display. There, you may pick out to most effective display in sticky or cover in sticky.

OVERLAY HEADERS

Select Header Builder withinside the Structure panel at the proper-hand aspect.
Click Overlay withinside the left panel.
Use the Overlay Header drop right all the way down to pick out a viewport width above which you would like to have the header overlay the web page content material.
This will bring about an overlay header on all pages and posts in which this header is present. You also can decide the Header Builder’s overlay kingdom on a per-web page foundation via way of means of going to Manage -> Settings -> Page Settings whilst enhancing an man or woman web page or post. How to add a header template oxygen