Transparent Sticky Headers in Elementor Pro: How To Create Them

When we upgrade from Elementor Lite to the Pro version, one of the greatest features we have available is the theme builder. This is what allows to create:

• Header
• Footer
• Post pages (design for a single post)
• Archives page (design for the blog page for example)
• 404 page

In turn, this gives us the capability to look for a theme that doesn’t come with all of these features already, which will only make the site slower by adding a bunch of resources (scripts and styles) that you’re simply not going to need. This is why I recommend – if you’re going to purchase the Pro version – using the Hello Theme. It’s free to download, plus it’s extremely light and paired with a good caching and optimization practice, you’re site is going to load at blazing fast speeds. With this theme you’re also pretty much forced to build all of the aforementioned items by yourself using Elementor.

I understand that there’s nothing like the time and comfort saved using a theme like OceanWP or Astra, both of which already have header and footer layouts built into them, but the flexibility you gain by going all the way with Elementor Pro is unmatched. You literally have a blank canvas on which you can build all parts of your site the way you envision them. Think of it:

Do you want to have a header with a three-column layout where you have a menu on one side, a big logo on the center and then another menu on the right, kind of like if the menu was divided in two by the logo? You can! All you would need to do is create two menus on the WordPress “Menus” tab of your website (one for the left side and one for the right) and then build the header on Elementor by choosing a section with three columns and dragging the ‘Nav Menu’ widget on the side columns and then the ‘Site Logo’ widget on the center.

However, having all of this free space to work with also comes with its own difficulties. One of them is creating a transparent sticky header. Since it is a page (and well, theme) builder, it isn’t entirely focused on just one section, meaning that header options are not the kind that you would have if you get the OceanWP theme with the Sticky Header add-on. It is the same Elementor builder that you see when building a regular page, with the only difference that you have the widgets normally used on a header first, like the ‘Nav Menu’, ‘Site Logo’, etc. Some people might say this is limited, but the key is in knowing how to take full advantage of Elementor.

So, how would you build a transparent sticky header on Elementor? Let’s get down to business.

The first step: building the transparent header

Go to ‘Theme Builder’ on your WordPress and click on ‘Header’ then ‘Add New’ at the top.

You’ll see all of the Header blocks Elementor already has built out. But for this example, lets go simple, just a two-column layout with the logo (left) and menu (right). So, don’t select any of the blocks, and go about as if you were building a normal page.

Select the two-column section and insert the Site Logo and Nav Menu widgets on each of the columns, respectively, as you can see in the image below.

Ok, so we’ll take the entire section and on style, we’ll set the background color to none by dragging the bar to where there’s no color. This’ll make the header to take the color of the element that’s underneath it. In this case, it’ll still be the body’s background color, which is white. Not really transparent if you ask me, right?

To give it that effect, there’s a couple more things we need to do and that is first setting the header to a height. You do that by going to the section and entering an amount where it says ‘Minimum Height’.

Note: I always choose an amount between 100 and 120 pixels to have the logo big enough to be seen, but not too big to be disturbing of the content.

Then, still in the section, you go to ‘Advanced’ and set the ‘Margin bottom’ to the negative amount that’s equal to the number of pixels you previously set the ‘Minimum Height’ to. If you’re guiding yourself by the image, the negative margin bottom would be -110.

To finish off step 1, we click on Publish and set the conditions for the header to be displayed on the entire site. You can toy with these conditions if you want to build different headers for different pages, posts or custom post types.

Look now on the image below how the transparent effect works, where the menu takes the darker tone of blue from the gradient, while the logo takes the lighter tone.

The second step: We got transparent. Now for the sticky header

Making it sticky is as simple as going back to ‘Header’ you’re building and selecting the section, then clicking on ‘Advanced’ > ‘Motion Effects’. On this tab, you will see pretty clearly where it says ‘Sticky’. Since what we’re building is a header, we’ll leave the dropdown on ‘Top’ and change where it says ‘Effects Offset’ to a low number like 20 or 30. This is for the number of pixels that the user will have to scroll to for the color changing to take place. Leave everything else as is.

I would recommend removing the sticky effect from mobile devices, as phones aren’t that big, and having a sticky header will take too much of real estate, which is super valuable on mobile. To do this, where it says ‘Sticky On’, just click on the X for mobile. 

The issue is that now we have what I’d call a sticky transparent header. That is, it will stick as you scroll along, but it will remain transparent. What we want is to be transparent for the main section, then to be sticky with a background color.

The third step: A code snippet to really make the transparent sticky header that you want

This step is fairly quick, but it does involve custom CSS code that you may not be too happy about. However, you’re not going to write any code because I have the snippet that you’re only going to have to copy and paste in order for everything to work.

So, again, in your ‘Header’, click on the section and go to ‘Advanced’. There, scroll down until where it says ‘Custom CSS’ and add the following:

Selector.elementor-sticky--effects { 
background-color: rgba(133,130,255,1) !important; 
}
Selector { 
transition: background-color 1s ease !important; 
}
Selector.elementor-sticky--effects >.elementor-container { 
min-height: 110px; 
}
Selector > .elementor-container { 
transition: min-height 1s ease !important; 
}

After adding that, you’ll finally get the transparent sticky effect for your header, as you can see on the GIF below:

Final Words

When you’re really start to get advanced with CSS and JS, what you can do with the header is incredible. You can have a big logo and then have the header shrink with a smaller logo coming from the side like on the Make A Mark Paintbar site, or have the header hidden when the user scrolls down and then shown when they scroll up. The resources I use for my CSS are the W3C schools website, Codepen and CSS-Tricks.

I hope you had a good time reading this tutorial. Let me know what you think in the comments below.