Sticky Header

Using header builder you can create a separate template for your sticky header. Just follow the steps described in “How to create new header template?”

After the sticky header template has been created, you can activate it in the same way as described for the main header template (check above) via three-tiered approach: for the entire website or only for separate post types & archive pages or only for separate pages / posts:

1.  After selecting your main header template you can then activate a Sticky Header. Please note: you can activate and disable sticky header separately for desktop and mobile devices  by switching between two device modes

2. In  Sticky Header Template you can then select the template to be used as sticky header 

3. By activating  Hide on Scroll option the behaviour of the sticky header will be as follows: sticky header appears first after starting to scroll down, after that it disappears while continuing to scroll down and appears again by scrolling up

4. Additionally you can define a  Sticky Header Opacity level for your sticky header. This will work only in case you didn’t fill the row (WPBakery) / the section (Elementor) of your header template with some solid color.

Sticky Row / Sticky Section

Another way to enable stickiness for your header template is to use sticky option in page builder.

WPBakery

While editing your header template, define the row which you wish to make sticky, click on “pencil” icon to start editing this row and here select “Header Sticky Row” option

In case you wish that your sticky row shrinks automatically, activate the “Shrink sticky row” checkbox (please note: this will not work in case custom row paddings are specified in “Design Options” tab).

Elementor

While editing your header template, define the section which you wish to make sticky, click on section icon to start editing this section and here select  “Header Sticky Section” option