On this Page
One of the most common questions, I have found on Elementor Official Groups & GitHub is how to create Sticky Header with Elementor.
To create the Elementor sticky header from scratch. I have to scour the internet and found a bunch of tutorials 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 that is well tested with both the section and Flexbox container without relying on any JavaScript or 3rd parties plugins with the ability to change the site logo on user scroll down.
Here is the fully functional example for the Elementor sticky header.
Basic Requirements & Knowledge:
- To fully utilize the Elementor sticky header functionalities, 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. - To support most browsers, use Autoprefixer.
Create the Header Template
I already enabled Default to New Theme Builder & Flexbox Container in Elementor’s Experiments. That is why the theme builder might be different from yours.
Step#1: Theme Builder
After you click the Theme Builder (reference above), you will be going to see all the Templates, you have created.
Step#2: Click the Add New button to create a Header template
To create the site header, we have to click the add new (+) icon button and choose the header as the header template.
After you choose the header template, it will lead to Elementor Library. From there you can choose the prebuilt templates or block or create the template from scratch.
Step#3: Change the HTML tag of the section to the <header>
Now, click the cog icon (settings) on the bottom left which will open the Header’s settings from there you have to change the tile and change the HTML tag to Header in general settings.
Create Transparent Header
To create a transparent header, we have to create the structure of the template and inside the structure, we have to drag and drop all the necessary widgets like site logo widgets, nav menu widgets, etc.
Step#1: Create a section or a container layout
To create the site header, first, we have created a structure containing 2 or 3 columns, or if you are using Flexbox Container experiments choose a single container.
Section users
Flexbox Container Users
Step#2: Drag and Drop all the widgets inside the section/container & add the CSS classes
Drag and drop all the widgets inside the page structure and provide CSS classes to the widget under the widget’s/section’s advanced tab (see the screenshot below for reference).
To style & control the site header, we have to add a CSS class to the container’s/ section’s advanced tab.
Container/ Section
Site Logo
Nav Menu widget
Step#3: Adjust the layout properly
Just align all the widgets to the center and do not add any style to the container/ section. Your design will look ugly for now later we will style it.
Step#4: Set the background color to the default
By default, the background color of the sections/ containers/ widgets is set to transparent. So you don’t have to style it.
Elementor Transparent sticky Header
To make the sticky header in Elementor, we have to enable Motion effects in the container/ section’s advanced tab.
Step#1: Set the z-index number to 1000
The
z-index
CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
Step#2: Set the sticky to top or bottom and effects offsets respectively
“Effects Offset” lets you determine when the effects will occur according to scrolling distance in pixels i.e 100px in our example. So basically it means, that when you scroll down 100px, the sticky effects will apply.
Elementor Sticky Header change color On Scroll
In our previous step, we enabled the sticky header under motion effects. Now change the color of the header from transparent to solid.
We have to apply Custom CSS so that when users scroll down the page the effects will occur. If you want to spice things up, you can add the mix-blend-mode CSS property to change the color of the header
/*
* sticky-header-container is the CSS class, I have added to container - advanced tab
container/section > Advanced settings> CSS class
* Rather than using transition: all property, we are choosing background and box-shadow only. This is meant for performance.
* I am using Custom Properties
*/
:root{
--site-transition: 300ms ease-in-out;
--sticky-background-color: #ffffff;
--sticky-text-color: #000000;
--box-shadow: #00000029 0 0px 20px 0;
--site-min-height: 100px;
--sticky-min-height: 80px;
}
/*
* Styling container before sticky effects
*/
.sticky-header-container{
transition:
background-color var(--site-transition),
box-shadow var(--site-transition),
padding var(--site-transition);
}
/*
* for sticky effects
*/
.site-header-container.elementor-sticky--effects{
background-color: var(--sticky-background-color);
box-shadow: var(--box-shadow);
/*
* More information about mix-blend-mode CSS property- https://www.w3schools.com/cssref/pr_mix-blend-mode.asp
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
...
*/
}
With Blend Mode CSS property
If you follow the step properly, this will happens, when the user scrolls down the page:
- Change the transparent background color to white and
- Add a box shadow to the container.
Shrink sticky header, site logo & Nav Menu when users scroll
If you recall properly we have added CSS classes to the container/ site logo & Navigation. Now, we are going to use it to shrink the sticky header when users scroll down the page.
Step#1: Shrink sticky Header
Section/ Column Users
/*
* You need to add padding to the section.
* if you're using Flexbox container, you can use min-height property instead of padding.
/*
* For section and Column users
*/
.sticky-header-container{
padding: 20px 0;
/*20px padding on top and botton*/
transition:
background-color var(--site-transition),
box-shadow var(--site-transition),
padding var(--site-transition);
}
.site-header-container.elementor-sticky--effects{
/*reduce to 10px padding on top and botton when sticky effects is applied*/
padding: 10px 0;
background-color: var(--sticky-background-color);
box-shadow: var(--box-shadow);
}
Flexbox Container users
/*
* Flexbox container users
*/
.sticky-header-container{
min-height: var(--site-min-height);
transition:
background-color var(--site-transition),
box-shadow var(--site-transition),
min-height var(--site-transition);
}
.site-header-container.elementor-sticky--effects{
min-height: var(--sticky-min-height);
background-color: var(--sticky-background-color);
box-shadow: var(--box-shadow);
}
Or if you don’t like my padding method, You can watch the Official Elementor’s video Approaching using the min-height property to create a transparent sticky header.
Step#2: Shrink Site Logo width
if you recall properly, we didn’t apply any styling to the site logo & nav menu widget it is mainly because we don’t want to overwrite with the important CSS rule.
In this step, I am targeting the Elementor image widget’s image tag and providing a width of 64px (change if needed) before the motion effects are applied, and then when the user scrolls down the page and the sticky effects are applied it will reduce the width of the image to 60px with some transition animations.
/*
* It works with Optimized DOM Output enable in Experiements settings.
* You can use Percentage too instead of pixel value.
* Adjust the width of the image as per your requirement
*/
.site-logo.elementor-widget-image img{
width: 64px;
transition:
width var(--site-transition),
opacity var(--site-transition);
}
.elementor-sticky--effects .site-logo.elementor-widget-image img{
width: 60px;
}
Step#3: Shrink Nav Menu and Change color
In this 4th step, we are going to shrink the Nav menu font size from 1.25rem to 1.2rem and change the color of the navigation menu when the user scrolls down from white to black color.
.site-nav .elementor-nav-menu--main .elementor-item
{
color: var(--sticky-background-color, #fff);
font-size: 1.25rem;
transition:
color var(--site-transition),
font-size var(--site-transition);
}
.elementor-sticky--effects .site-nav .elementor-nav-menu--main .elementor-item{
color: var(--sticky-text-color, #000);
font-size: 1.2rem;
}
(New Topic) Swap/ change logo on scroll
Step#1: Drag and Drop the new Image widget next to the site logo widget & stack it together:
Now drag and drop the image widget next to your site logo widget (see the screenshot) and stack them on top of each other with a built-in absolute position feature.Step#2: Give a CSS class to the new image widget
Step#3: Set the Image widget (second image) to the absolute position
Step#4: Apply the image width as same as the site logo widget
I only add one line of a CSS rule (.site–logo-red.elementor-widget-image img) and all the CSS is the same as Step#4(B).
/*
* This CSS rule need to be applied
* .site--logo-red.elementor-widget-image img
*/
.site-logo.elementor-widget-image img,
.site--logo-red.elementor-widget-image img{
width: 64px;
transition:
width var(--site-transition),
opacity var(--site-transition);
}
Step#5: Add custom CSS to change the site logo when users scroll down
/*
* When Sticky effects applied
*/
.elementor-sticky--effects .site--logo-red.elementor-widget-image img,
.elementor-sticky--effects .site--logo.elementor-widget-image img{
width: 60px;
max-width: 60px;
}
/*
* We are switching the opacity from 0 to 1 when sticky effects is applied and switch to 0 when it is not applied.
* Set the new image's opacity to Zero
*/
.site--logo-red.elementor-widget-image img{
opacity: 0;
}
/*
* When Sticky effects applied
*/
.elementor-sticky--effects .site--logo-red.elementor-widget-image img{
opacity: 1
}
.elementor-sticky--effects .site--logo.elementor-widget-image img{
opacity: 0
}
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 appreciate and provide to give you credit.
Thank you
And please see the comment below to find all your answers
Full snippets with changing site logo
/*
* sticky-header-container is the CSS class, I have added to container - advanced tab
* Rather than using transition: all property, we are choosing background and box-shadow only. This is meant for performance.
* I am using Custom Properties
* Full CSS
* Mobile is not optimized
* Entire Code
*/
:root{
--site-transition: 300ms ease-in-out;
--sticky-background-color: #ffffff;
--sticky-text-color: #000000;
--box-shadow: #00000029 0 0px 20px 0;
--site-min-height: 100px;
--sticky-min-height: 80px;
}
/*
* Styling container before sticky effects
*/
.sticky-header-container{
transition:
background-color var(--site-transition),
box-shadow var(--site-transition),
padding var(--site-transition);
}
/*
* for sticky effects
*/
.site-header-container.elementor-sticky--effects{
background-color: var(--sticky-background-color);
box-shadow: var(--box-shadow);
}
/*
* You need to add padding to the section.
* if you're using Flexbox container, you can use min-height property instead of padding.
/*
* For section and Column users
*/
.sticky-header-container{
padding: 20px 0;
transition:
background-color var(--site-transition),
box-shadow var(--site-transition),
padding var(--site-transition);
}
.site-header-container.elementor-sticky--effects{
padding: 10px 0;
background-color: var(--sticky-background-color);
box-shadow: var(--box-shadow);
}
/*
* Flexbox container users
*/
.sticky-header-container{
min-height: var(--site-min-height);
transition:
background-color var(--site-transition),
box-shadow var(--site-transition),
min-height var(--site-transition);
}
.site-header-container.elementor-sticky--effects{
min-height: var(--sticky-min-height);
background-color: var(--sticky-background-color);
box-shadow: var(--box-shadow);
}
/*
* It works with Optimized DOM Output enable in Experiements settings.
* You can use Percentage too instead of pixel value.
* Adjust the width of the image as per your requirement
* This CSS rule need to be applied
* .site--logo-red.elementor-widget-image img is updated
*/
.site-logo.elementor-widget-image img,
.site--logo-red.elementor-widget-image img{
width: 64px;
transition:
width var(--site-transition),
opacity var(--site-transition);
}
.elementor-sticky--effects .site-logo.elementor-widget-image img{
width: 60px;
}
/*
* For site navigation
*/
.site-nav .elementor-nav-menu--main .elementor-item{
color: var(--sticky-background-color, #fff);
font-size: 1.25rem;
transition:
color var(--site-transition),
font-size var(--site-transition);
}
.elementor-sticky--effects .site-nav .elementor-nav-menu--main .elementor-item{
color: var(--sticky-text-color, #000);
font-size: 1.2rem;
}
/*
* When Sticky effects applied
*/
.elementor-sticky--effects .site--logo-red.elementor-widget-image img,
.elementor-sticky--effects .site--logo.elementor-widget-image img{
width: 60px;
max-width: 60px;
}
/*
* Change Logo steps
* We are switching the opacity from 0 to 1 when sticky effects is applied and switch to 0 when it is not applied.
* Set the new image's opacity to Zero
*/
.site--logo-red.elementor-widget-image img{
opacity: 0;
}
/*
* When Sticky effects applied
*/
.elementor-sticky--effects .site--logo-red.elementor-widget-image img{
opacity: 1
}
.elementor-sticky--effects .site--logo.elementor-widget-image img{
opacity: 0
}
/* Button, if you have one*/
/*Button*/
.sticky-btn .elementor-button{
background-color: #000;
transition: background-color var( --site-transition);
}
.sticky-btn .elementor-button-text{
color: #fff;
transition: color var( --site-transition);
}
.elementor-sticky--effects .sticky-btn .elementor-button{
background-color: #fff;
}
.elementor-sticky--effects .sticky-btn .elementor-button-text{
color: #000;
}