Elementor Sticky Header Ultimate Guide

Everyone loves Elementor sticky headers! In this tutorial we’re going to show how you can setup your own header in Elementor, make it stick to the top (or bottom) of your page, and we’ll even throw in a few effects like transparency, shrinking, growing, and color changing effects too.

Elementor Sticky Header: The basics

If you prefer video format, then check out the video below to make your header sticky.

The first step is just making your regular elementor header sticky. Take your existing header that has been created as a “Header” template in Elementor, and click the outermost section that contains the header. Click “advanced”, “motion effects”, and set sticky to “top” as seen in the image below:

Save the page, refresh, and verify the header sticks to the top of the page.

Note: You can make just about any element sticky. If you like the look of a header that starts below the hero image, scrolls up, and sticks to the top, then you can simply add a section below the header, add your nav menu to the Elementor section, make it “Sticky top” like we just did, and it will stick to the top when you scroll down.

That’s it for making an element sticky, but what about if you want to have the Elementor header stick to the top of the page, but hover over the hero section with a transparent background when the user is at the top of the page?

Elementor Transparent Sticky Header

Making an Elementor transparent sticky header is a little trickier and requires some CSS, but it’s pretty manageable.

Warning: If you’re using Wp-Rocket or another caching plugin, you may want to disable it until you get everything working the way you want.

To make the Elementor Sticky header “transparent”, you just need to make the header section transparent. Click the header section, then the “style” tab, then select the “background color”, and drag the second slider all the way to the “invisible” or transparent side. Click save and verify your header is transparent!

Refreshing the page we can see our Sticky elementor header is transparent, but now we have the problem of the menu text hovering over other text in the page.

We also have the problem of the header appearing to be white when it’s at the top of the page. That’s because the header is pushing down the content below it, even though it’s transparent.

First, let’s fix the problem the hovering menu over other text. Ready to write some CSS code? Disable any caching plugins if you have problems!

Click the header section, go back to “advanced”, then click the “advanced” dropdown, and there should be a CSS ID field. You want to put homepage-header as the value of the CSS ID field.

You could try using the CSS Class, which is actually preferred, but in order to make this more likely to work for more people, we’re going to use the ID.

Next, click the “Custom CSS” drop down, and add in the following code to the css field:

#homepage-header {
    transition: background-color 2s ease;
}

#homepage-header.elementor-sticky--effects {
    background-color: #00ff00;
    transition: background-color 2s ease;
}

Code Explanation: the #homepage-header means “target the ID named ‘homepage-header’. ID’s are targeted by a pound sign: #, while classes are targeted by a period: .

the code inside the { and } curly brackets is the code that is applied to any elements that match the requirements.

The top section of code matches any element with the ID of “homepage-header”. The bottom section matches any element that has the ID of “homepage-header” AND has a class of “elementor-sticky–effects”.

The “transition: background-color 2s ease”; is basically saying “make the transition to this state in 2 seconds”. So when the state of the app changes, (transparent color to green) transition gracefully instead of abruptly.

We want the bottom block of code to transition the color from transparent to green in 2 seconds.

We want the top block of code to transition from whatever it was, back to the original color, gracefully in two seconds.

When the user scrolls down, Javascript will add the class “elementor-sticky–effects” onto the header element, causing the bottom block of code to run.

When the user scrolls back up, the “elementor-sticky–effects” will be removed, causing the background color to change again, which will cause the transition in the top block.

Set Effects Offset

So we have the code setup to change when the user scrolls down, but nothing will happen yet. We need to tell Javascript WHEN to add the “elementor-sticky–effects” class to the header section. We do that with the “effects offset” field under “motion effects”. I set mine to 400px, meaning the “elementor-sticky-effects” class will be added to the header section element when the user scrolls down 400 pixels. See image below:

Awesome. Let’s save, and refresh the page to see the changes in action.

Seems to work! We now have a transparent sticky header in Elementor.

This sticky header is a little large though, and we want our users to see the rest of the website. We can make the header smaller by shrinking the logo, so let’s do that to make our Elementor header look a little better.

Shrinking & Growing Sticky Transparent Elementor Header

There’s a variety of ways to shrink a header, depending on how your header is currently setup. In my case, the logo is too big, and it’s causing the section that contains it (the header) to grow, so if we shrink the logo image, we’ll shrink the header. So this time, we add an identifier to the logo image, and we’ll gracefully transition the size of the image.

Click the image, click advanced, then click the “advanced” dropdown, and add “logo” to the css Classes. See the image below:

Now add the following CSS:

.elementor-sticky .logo img {
    transition: width 2s ease;
}

.elementor-sticky--effects .logo img {
    width: 50px;
    transition: width 2s ease;
}

Save, and give it a try. You should see the image gracefully shrink.

Code Explanation: the .elementor-sticky .logo img { } is saying “do the stuff within { and } on all “img” elements inside an element that has the class “logo” that is inside an element that has a class “elementor-sticky”. Inside this block is make the transition on the “width” property and take two seconds to complete.

The second section is saying “on the img elements inside a .logo inside a .elementor-sticky–effects, set the width to 50px, and make the change have a transition duration of two seconds.

We’re almost done!

Overlap elements for a true Elementor Transparent Sticky Header

If you look at the header now, we still have the header pushing all the content down, making for this gross looking bar at the top of the screen. I want this header hovering over top of my hero image. You can do that by giving the hero image a negative margin.

Go back to your homepage, select the hero image, click “advanced”, then click the “advanced” drop down. UN-link the margin, and start clicking on the DOWN arrow on the “margin TOP”. You’ll see the hero image start to move underneath the header. In order to get the image to the very top, I need to set the margin to -120px. Your mileage may vary.

Note on Wp-Rocket or other caching plugins

You may experience problems with Wp-Rocket cache or other caching plugins when doing this. In Wp-Rocket’s “File Optimization” tab, in the “delay Javascript execution” section, there’s a warning message that says “Read the documentation for a list of compatibility exclusions”. Elementor is in this list, so you’ll need to read that section, and add those lines to the “Exclude Javascript files” field. For me, that meant adding these lines to the Excluded Javascript Files:

/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
/jquery-migrate(.min)?.js
/header-footer-elementor/inc/js/frontend.js
/elementor/
/elementor-pro/
ElementorProFrontendConfig
elementorFrontendConfig

You may have different requirements if you’re using a different caching plugin.

But anyways that’s all for Elementor Sticky Headers with Transparency, shrink and grow effects yo.

Like this article?

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest

Leave a Comment

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