Many WordPress themes suggest fixed headers, also known as “sticky” headers, but such sections can be also created with Elementor Page Builder using JetBlocks plugin.
From this tutorial, you will learn how to use the Jet Sticky feature and add a sticky header to any WordPress theme while using Elementor.
Feel free to watch the following video tutorial to see how easily one can create sticky sections while working with Elementor, or keep reading.
Making Header Section “Sticky”
- First, you need to create a new header template. You can create one from scratch or use one of the pre-designed header templates represented in JetThemeCore templates library. You can find the header templates in Crocoblock > My Library, listed in Header theme parts section.
- Click Edit with Elementor option. Elementor editor will open.
- Right-click the Editing option and select Edit Section. Then navigate to Advanced section settings. Here locate Jet Sticky block.
- For enabling Sticky Header option turn on Sticky Section.
- Now select the proper Sticky Section Visibility. It means you can select the device resolutions on which the section becomes sticky.
- The next available option is Z-Index. Here you can make the section overlay the existing content on your site, or be shown under some of the blocks.
- Max Width option allows selecting the maximum width of the sticky section. Just drag the control to adjust the width according to your needs.
Styling a Sticky Header
You can also customize the Sticky header’s style settings. The new style will be applied when the section becomes sticky (when one scrolls the page up and down).
- In the style settings you can change the margins and paddings for the sections, apply a different background type in order to make the header semi-transparent or inverted when it appears on the top of your website’s content.
- There is also a Box Shadow option that allows you to add a shadow around the header in order to make it more discernable.
- The Transition Duration option will define the time delay for the header to position itself at the top of the page when one scrolls it.
- After setting the conditions click Update to apply the changes to your site.