Here's a quick and easy way to create a transparent sticky header in Elementor Pro. No plugins needed. Just a few minutes and some CSS.
I wanted to share our approach to creating a transparent header as quickly and easily as possible.
What you'll need
- A WordPress website.
- Elementor Pro plugin setup on your WordPress site.
- About 5-10 minutes.
We’re assuming you already have WordPress and the necessary Elementor plugins active and ready to go. If not please you may want to get your website setup first. Otherwise, much of this won’t make sense.
Let's get started
When creating headers in Elementor I prefer to start with a new page instead of a new header template. This approach allows me to test things out more easily. Once satisfied I can simply copy and paste the header into a header template.
Step 01 - Create a New Test Page.
- Add a new page and launch the Elementor builder.
- Add a new section. I like to use the 2 column section.
- Update the section's height by going to Layout > Height and selecting "Min Height". Click the "VH" option and type in "100".
- Update the section's background to a solid color. I chose a darker color for this section.
- Duplicate the section and update the background color to something different.
Step 02 - Build Your Header.
- Create a new section above the ones you just created. For purposes of this tutorial we went with the single column.
- Drag in an image module.
- Swap the default image with the logo you'd like to use.
Step 03 - Update Your Header Section Settings.
- Under "Layout" go to "Height" and choose "Minimum Height". For purposes of this tutorial I am going with 120 px. You can update this to what works for your header.
- Under the "Advanced" menu type in "header" for the CSS ID.
- Type in "1" for the Z-Index.(just to be safe).
- Under "Motion Effects" choose "Top" for the Sticky options.
- Type in "1" for Effects Offset.
- Under "Custom CSS" cut and paste the CSS provided below.
Header CSS for dark transparent background:
#header.elementor-sticky--effects {
background-color: rgba(0,0,0,.5);
transition: all .6s ease;
}
Header CSS for light transparent background:
#header.elementor-sticky--effects {
background-color: rgba(256,256,256,.5);
transition: all .6s ease;
}
Step 04 - Launch and Test Your Header
- Save your page.
- Click the preview "eye" button.
Step 05 (optional) - Site-wide header.
- Open up a new tab in your web browser.
- Either open an existing Header Template OR create a new one.
- Go to the browser tab containing your new header. Right-click on the header's section tab and select "copy".
- Go to your browser tab containing your site-wide header. Right-click into the dotted "Drag widget here" area and select "paste".
- Publish and test your header.
Considerations
- Mobile Height: Depending on your how your header stacks you may need to change the height of your header. If you DO change the height make sure to ALSO update the bottom margin to reflect the new height.
- Adjust background opacity: To change the backgrounds opacity you simply need to change the “.5” number under the background-color tag.
