Table of Contents
- 1 Create the Header Template
- 2 Create Transparent Header
- 2.1 Step#2(A): Select your structure (As per requirement)
- 2.2 Step#2(B): Drag and Drop all the widgets inside the section & provide CSS classes
- 2.3 Step#2(C): Vertical Align to Center and set the HTML tag to Header
- 2.4 Step#2(D): Change the background color to None or reduce the opacity (alpha color) to 0
- 3 Transparent sticky Header with Elementor pro
- 4 How To Change Sticky Header Color On Scroll
- 5 How to Shrink header on scroll
- 6 Shrink the site logo and Navigation Menu on scroll
- 7 Change logo on scroll in Elementor
- 7.1 Step#7(A): Drag and Drop Another Image widget & stack it together :
- 7.2 Step#7(B): Give a CSS class to the new image widget
- 7.3 Step#7(C): Provide Same width in pixels as an old image and define opacity-
- 7.4 Step#7(D): Set the position to absolute on 2nd logo
- 7.5 Step#7(D)Step#7(E): Add CSS to Change the Logo when users scroll
One of the most common questions, I have found on Elementor Official Groups & GitHub is how to create Sticky Header with Elementor by taking this question as an example and for learning CSS in-depths.
To create the sticky header and a bunch of Elementor's sticky effects from scratch. I have to dig up a bunch of tutorials found online and most of the how-to tutorials are simply copying and pasting the same CSS from Official YouTube channels.
I thought of writing a comprehensive, in-depth tutorial and reliable source well tested without relying on extra JavaScript or any 3rd parties plugins or addons.
Watch the video & see the results
If you decided not to spend hours configuring your header, you can buy the template for 10USD.
So, if you've Elementor pro and don't want to rely on 3rd parties add-ons this is the tutorial for you.
In this post, I will show you a step-by-step guide.
What you'll learn
- How to create transparent sticky header with Elementor Pro
- Change the transparent background color to solid.
- Swap or change the Logo when users Scroll down the wheel when Elementor's motion effects is applied
- change the navigation color when scroll
Basic Requirements & Knowledge-
- To work properly, you will need Elementor Pro (Affiliate link).
- You need to add your own Media Queries (video) to make your site Mobile responsive.
Bonus: If you buy the template ,you don't have to worry about it. - For browser compaitability use Autoprefixer
Create the Header Template
Step#1(A): Templates - Add new
Hover your mouse over the Elementor's Templates area (backend) and click the Add New button to create a template.
- Hover your mouse to the Templates
- Click the Add New Button

Step#1(B): Select 'Header' from the list and give a name for future reference
After you click the add new button, Modal will appear, and from there, you will have to select the header from the list and give a proper name for future reference & then click the Create template to create your site header.
- Choose the header template as the type of Template.
- Give a name for future reference
- Click the Create template.

Create Transparent Header
To create a transparent header, we have to create structure and inside the structure, we will drag and drop all the necessary widgets like site logo widgets, nav menu widget, etc.Step#2(A): Select your structure (As per requirement)
- Select 2 or 3 columns and create the structure of the layout

Step#2(B): Drag and Drop all the widgets inside the section & provide CSS classes
Now drag and drop all the widgets inside the page structure and provide CSS classes to the widget under advanced tab (see the screenshot below for reference)


Step#2(C): Vertical Align to Center and set the HTML tag to Header
- Click the Section Handle to open layout tab
- Vertical align to center (screenshot below for reference) to align all the content inside the section to the middle
- Click the HTML tag and Choose 'header' as shown in screenshot below


Step#2(D): Change the background color to None or reduce the opacity (alpha color) to 0
Keep this in mind that some themes might overwrite the style. So disabling the theme feature will help.- Click the section handle this will open Layout tab.
- Navigate the style tab and choose background.
- Under Normal tab click the background type (paint icon) and click the classic.
- Reduce the alpha color or opacity to zero as shown on the picture below.

Transparent sticky Header with Elementor pro
In this step, we are going to create a transparent sticky header in WordPress using Elementor that change the background color and also at the same time it will shrink the header when users scroll down the page.
Step#3(A): Set the z-index to 100 or more
- Click the section handle.
- Go to Advanced tab
- Set the section z-index to 100 or more.

Step#3(B): Motion effects and set the sticky to top or bottom and set the effects offset to 50px or more-
- Navigate to the section/header handle
- Click the Advanced tab
- Click the Motion Effects
- Sticky to top: to stick the section to the top
- Give a value of 50px or more to the Effects Offset.
*"Effects Offset" lets you determine when the effects will occur according to scrolling distance in pixels i.e 50px in our example.
So basically it means, when you scroll down 50px, the sticky effects will apply.

How To Change Sticky Header Color On Scroll
Padding is not necessary, if you're just changing the background color of the sticky header.
/*
* sticky-header is the CSS class, we have added to section- advanced tab
* For smooth animation when user scrolls, we have added transitions to background color, box shadow & padding (later).
* !important is added, so it overwrite theme style or Elementor's style
* I am using Custom Properties
*/
:root{
--transition: 300ms ease-in;
}
.sticky-header{
Background-color: transparent!Important;
transition:
background-color var(--transition),
box-shadow var(--transition);
}
Our idea is to set up sticky header, so when user scrolls down, transparent background color changes to solid color and give a box shadow.
To get the smooth transition when scroll down and scroll up, we have added transition to the background color and box-shadow. (see the code above)
/*
* if you change the background color to transparent in Elementor editor, you might want to add !important.
* box shadow effects will apply when user scroll that why we add the transition to sticky-header class.
*/
.sticky-header.elementor-sticky--effects{
background-color: #fbfbfb!important;
box-shadow: #00000029 0 0px 20px 0;
}
How to Shrink header on scroll
This CSS is same as step 4, so don't copy the entire code. I use Adding to adjust height on top and bottom. If you don't want it you can use Elementor's min-height methods.
.sticky-header{
padding: 2% 0;
Background-color: transparent!Important;
transition:
background-color var(--transition),
box-shadow var(--transition),
padding var(--transition);
}
To reduce the height of the site header, we have to reduce the padding to 1% on both top & bottom. So when user scroll down the pages, padding will also reduce and shrink the header
.sticky-header.elementor-sticky--effects{
padding: 1% 0;
background-color: #fbfbfb!important;
box-shadow: #00000029 0 0px 20px 0;
}
See the Result:
Or if you don't like my method of padding, You can watch the Official Elementor's video Approaching using min-height property to create transparent sticky header.
7th and 8th steps are mainly for shrinking logo & changing the colour of the navigation menu.
Shrink the site logo and Navigation Menu on scroll
Step#6(A): Site Logo Widget
We have added CSS classes to the 'Site Logo' and 'nav menu' widget as 'site--logo' and 'nav-menu' respectively in step#2(B).
- Click the Site logo handle
- Go to Advanced tab
- Under advanced tab go to Custom CSS & add the css

/*
* It works with Optimized DOM Output enable in Experiements settings.
* You can use Percentage too instead of pixel value.
*/
.site--logo.elementor-widget-image img{
width: 120px;
transition: width var(--transition);
}
Now we have to add Custom CSS to the Site logo widget to shrink the logo when scroll down.

/*
* Elementor use elementor-sticky--effects, we are simply leveraging its CSS class.
*Now Logo will reduce to 100px before it was 120px on scroll.
*/
.elementor-sticky--effects .site--logo.elementor-widget-image img{
width: 100px;
}
Step#6(B): Nav Menu widget
We have to do same thing to our nav menu widget too like site logo but I will focus on Color and font size instead.
- Click the Nav menu widget handle
- Go to Advanced tab
- Custom CSS

If you do not want to reduce the font-size, remove the font-size rule.
.nav-menu .elementor-nav-menu--main .elementor-item{
color: #000000;
font-size: 1.25rem;
transition:
color var(--transition),
font-size var(--transition);
}
When Sticky Effects is applied to the navigation menu ( .nav-menu )

.elementor-sticky--effects .nav-menu .elementor-nav-menu--main .elementor-item{
color: red;
font-size: 1rem;
}
Change logo on scroll in Elementor
Let me tell you one thing, there are lots of tutorials out there teaches you how to use CSS content property to swap or change logo.
Please don't follow the tutorials. That is the first mistake I made.
See it for yourselves below.

If you’re using
Hello Elementor Theme then there is no way to achieve these effects at all but it is possible with 3rd parties themes & plugins such as WP Astra pro .
I searched a lot on forums, Facebook groups, videos but there were no tutorials available at that time. After trial and errors, I found the solution I need ( read comments) and it works wonder.
Follow the steps-
Step#7(A): Drag and Drop Another Image widget & stack it together :
Now drag and drop image widget next to your site logo widget (see the screenshot). We are going to stack on top each other with built-in absolute position feature.
Step#7(B): Give a CSS class to the new image widget

Step#7(C): Provide Same width in pixels as an old image and define opacity-
Now, provide the new image width of 100px (your requirement) as same as old site logo widget. So it look consistent
/*
* We are combining the old CSS of site logo widget (step#6(A) CSS) with the new image widget CSS
* We are applying an opacity to zero on second image widget, so it is not visible to the user.
*/
.site--logo-red.elementor-widget-image img,
.site--logo.elementor-widget-image img{
width: 120px;
transition: opacity var(--transition),
width var(--transition);
}
.site--logo-red.elementor-widget-image img{
opacity: 0;
}
Step#7(D): Set the position to absolute on 2nd logo
- Click the 2nd Image widget handle
- Navigate to Advanced tab.
- Click the positioning setting.
- Select the Position to Absolute.
- 2nd image will overlap/ stack to site logo widget

Step#7(D)Step#7(E): Add CSS to Change the Logo when users scroll

.site--logo-red.elementor-widget-image img,
.site--logo.elementor-widget-image img{
width: 120px;
max-width: 120px;
transition:
opacity var(--transition),
width var(--transition);
}
.elementor-sticky--effects .site--logo-red.elementor-widget-image img,
.elementor-sticky--effects .site--logo.elementor-widget-image img{
width: 100px;
max-width: 100px;
}
/*
* We are switching the opacity from 0 to 1 when sticky effects is applied and switch to 0 when not applied.
*/
.site--logo-red.elementor-widget-image img{
opacity: 0;
}
.elementor-sticky--effects .site--logo-red.elementor-widget-image img{
opacity: 1
}
.elementor-sticky--effects .site--logo.elementor-widget-image img{
opacity: 0
}
Thank you Breanna Berends for reporting me in time.
If you love it don’t forget to share or comment.
If i made any mistake don”t forget to add your comment. We will be really appreciate and provide to give you credit.
Thank you
And please see the comment below to find all your answers
Transparent sticky header with free plugin
You can choose which plugin is the best for you from six 3rd parties plugins or addons that are free can accomplished the same effects as Elementor pro
Different approach, you can rely on.