In this tutorial, I’m going to show you how to create a sticky transparent header in Elementor using the Elementor sticky header on scroll effects.
Our header is going to be transparent and on scroll, it’s going to get sticky and change background color.
I’ll also show you how to shrink your logo on scroll or shrink the whole header on scroll and how to make the header appear after a particular percentage scroll.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Video: Elementor Free Sticky Transparent Header Tutorial
Step 1: Create A Free Elementor Header
In your WordPress website, under Pages open up your homepage (01:24).
When you edit it with Elementor, select your Hero section and go to Style (01:26), under Background Type, give it a gradient background color of your choice.
Next, you need to create the header.
Since you’re on the free version of Elementor and you’re going to use a plugin called Elementor Header & Footer Builder made by Astra.
To get this plugin up and running, go to your dashboard and under the Plugins section
Search for the Elementor Header & Footer Builder then install and activate it. (02:13)
You’re also going to need another Plugin called Elementor sticky header effects, so back under Plugins, click to add new and search for sticky effects then install and activate it (02:37)
This plugin will enable you to create and work with a sticky header without having to use any CSS code or to use Elementor Pro to create a sticky header.
After installing and activating, go to your Appearance section and to the header footer builder plugin (03:13).
When it opens up, press the Add New button to create a new header, give it a name, set Type of Template to Header and Display to Entire site, then Publish (03:27), then click the Edit with Elementor button.
In your Elementor editor, add a new 2 column section (03:45), then in the Widgets section drag the Site Title widget to the first column of your section, make sure it is from the Header Footer Builder, that is, that it has HFB on it.
Go back to the Widgets section and search for ‘menu’, find the Navigation Menu widget (with HFB), drag it to your second column (04:30).
Select the Menu, go to the Style option in the Edit Navigation Menu area, under Typography set the font size to 20 pixels, under Layout set Column Width to 70%, under Content, go to Alignment and set it to the right side. (05:05)
Select the Site Title column and in the Edit section under Layout, set Column Width to Boxed.
Step 2: Give Your Header a Background
Now, we’re going to give the header a background color and increase its height too.
Select the section and in the Edit Section area on the left, go to Style and under Background Type, choose a color. Then go to Advanced, on the Padding option set 1 (EM) for the bottom and 1 (EM) for the top. Click the Update button and preview. (05:55)
Step 3: Make Elementor Header Transparent
To make the header transparent, go back to your Elementor and select your header section, in the Edit section area on the left, go to Advanced and find the Sticky Header Effects option (06:18)
Also Read: Max Mega Menu for Elementor – Create Free Elementor Mega Menus
The sticky header effects option only appears when you have the Elementor Sticky header Effects plugin installed and activated.
Enable the sticky header effects option, then you’ll be given the options to choose where to enable the sticky header that is, desktop, tablet, and mobile.
Then down on the Scroll Distance option, set it to 200 pixels (06:50), hit update, and then preview your page.
If you don’t want to keep the background on your header, go back to your Edit section, and under Sticky Header Effects enable the Transparent Header option (07:14)
Step 4: Make Elementor Header Sticky and Transparent
To do this, select the header section, go to Style and under Background Type, select color and slide the color picker knob to reduce the color, update and reload the page. (07:48)
You can also reduce or increase the transparency of the color, and you can also change the background color on scroll.
Step 5: Change Elementor Background Color on Scroll
On your sticky transparent header, you can choose to have your background color change to a different color on scroll. To do this:
With your header selected, go to Advanced and under Sticky Header Effects enable Background color and on the ‘color picker’, choose your color (08:37)
To Read: How to reCreate Websites with Elementor based AI Builder – 10Web
Step 6: Shrink Elementor Header on Scroll
In your Edit Section area, enable the Shrink Header option, then set Header Height to 40 pixels (09:43)
So now you have your transparent header which shrinks and changes background color on scroll.
You also have the option to blur your header; when you go back to your sticky effects, enable the Blur Background option, this means whatever is behind the header becomes blurry while scrolling.
There are a couple of other options in the sticky effects section you can tweak to your liking. For example the option to shrink your logo, change logo color on scroll, or hide the header on scroll.
When you enable the ‘Hide header on scroll down’ option, for example, you can choose how many pixels the header will be hidden on scroll, set it for example to 700 pixels (11:52). So when you scroll down 700 pixels the sticky header will disappear, when you scroll back up it reappears.
Elementor Sticky Header Responsive Settings
Under responsive mode (13:14), you can select the tablet or mobile then change the settings for the sticky header to be visible.
On the mobile device, for example, select the Page title and under Layout set Column Width to 70%, then select the dropdown and set its column width to 30% (13:25), update, and preview.
Conclusion
That’s how you can make a free sticky transparent header in elementor without adding even a single line of CSS code.
Your header remains sticky and transparent even as you navigate through the different pages on your menu/page.
For any comments or questions, please use the section below. Remember to subscribe to my newsletter and youtube channel for more tips and tutorials.
