Back to contents

JetBlocks extensions. How to create a sticky header

This tutorial helps you to create a sticky header with the help of JetBlocks extensions.

The header is one of the integral parts of any site. You can see it at the top of a page. With the help of JetBlocks plugin you have an opportunity to make it sticky and the header will be visible when you scroll down a page.

sticky header

Let’s know how to make the header sticky.

Creating a sticky header

Step 1 – First of all, go to an Advanced section and enable the Sticky Section option.

sticky header JetBlocks extensions

This option can be maintained not only by the desktop but also by the tablet and mobile.

Z-index allows you to overlay the existing content – the higher the value, the more the layer is prioritized, covering all the content that has the less z-index values.

You can make the section so wide as you need with the Max Width.

Step 2 – It’s time to style up your section. Set up Margin an Padding values to make a section of an appropriate size.

sticky section style

As a background, you can add any colour or insert an image.

The Box Shadow allows you to make the header stand out even more. Here you can set up a spread, vertical and horizontal position.

sticky header

Step 3 – Don’t forget to click Update button to save the changes.

Well done! Click Preview changes and enjoy the results of your work.