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