This tutorial will show how to create and adjust style settings in Elementor to make a sticky header unique with the help of JetBlocks extension.
The header is one of the integral parts of any site. Here the core information about the company displays, such as logo, contacts, call-to-action-buttons and of course, a site menu, which is responsible for proper visitor navigation through the website. Find 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 scrolling down the page.
Let’s know how to make the header sticky.
Creating a sticky header
1 Step — Open your Header in Elementor Editor
First of all, open the header in Elementor, go to Crocoblock > My Library > Header then click Edit with Elementor.
2 Step — Enable Sticky Section
After the new window is opened, click on the Edit Section, go to the Advanced Settings and find JetSticky to Enable it.
Set up Sticky Header Visibility for Tablets and Mobile Phones.
Z-index allows the existing content to overlay – the higher the value, the more the layer is prioritized, covering all the content that has less z-index values.
ATTENTION!You may not see these changes in Elementor, but after updating, visit the website and the changes will be visible.
Make the section as wide as needed with the Max Width.
3 Step — Sticky Section Style
Customize the Header by choosing Margin and Padding values to make a section of an appropriate size.
It is possible to add a cool color-changing effect of the header when scrolling.
There is one more great option, instead of background color you can choose an image. If the picture perfectly fits the style of the website, visually it will be amazing.
Style up the header with the Box Shadow to make the header stand out even more. Here set up a spread, vertical and horizontal position. Find out some more options to make the header attractive and according to your requirements.
Sticky Header in Action
Well, now all is ready to create an incredible sticky header. As you can see, the steps are very simple, activate and customize the header with a massive amount of options in a few clicks.
Look at the results of the JetBlocks extension!
