How to Create a Sticky Header with JetBlocks plugin for Elementor

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

  1. 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.
  2. Click Edit with Elementor option. Elementor editor will open.
  3. Right-click the Editing option and select Edit Section. Then navigate to Advanced section settings. Here locate Jet Sticky block.
  4. For enabling Sticky Header option turn on Sticky Section.
  5. Now select the proper Sticky Section Visibility. It means you can select the device resolutions on which the section becomes sticky.
  6. 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.
  7. 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).

  1. 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.
  2. There is also a Box Shadow option that allows you to add a shadow around the header in order to make it more discernable.
  3. 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.
  4. After setting the conditions click Update to apply the changes to your site.


  1. George

    Is there no option to change the font-color after the user scrolls down the page and the header background color comes in?

    1. Anastasiia Mykytiuk

      Hi, George!
      Unfortunately, such option is not available yet, however you can leave your requests and suggestions here and our developers will take them into consideration as soon as possible.

  2. google

    hi this submit very cool

  3. Steve McKillip

    useless if the background color cant be changes after scroll.

  4. Steve McKillip

    useless if you cant change the background color after scroll. useless.

    1. Anastasiia Mykytiuk

      Hi, Steve!
      Thanks for your comment.
      Actually, you can change the background color but for the whole section at once (P.S.: have at look at the screenshot
      This article is to describe the issue in general, you never know what each individual person needs so you can’t describe all the available options. If you need more detailed information, please, read through the CrocoBlock documentation.

Leave a Reply

Your email address will not be published. Required fields are marked *


Now You're One of Us!

Check Your E-mail & Follow The Steps

We use cookies to ensure the best experience for you on CrocoBlock. Please, accept the usage of cookies.