- 1) Basic requirements & knowledge:
-
2)
Create the Header Template
- 2.1) Step#1- Theme Builder
- 2.2) Step#2- Click the Add New button icon (+)
- 2.3) Step#3- Change the title and HTML tag for better semantics
- 2.4) Step#4- Create a structure
- 2.5) Step#5- Drag and Drop all the widgets inside the container
- 2.6) Step#6- Place all the items horizontally and align the items in the center
- 2.7) Step#7- Assign unique CSS classes to the widgets & Container
-
3)
How to create a transparent sticky header with Elementor?
- 3.1) Step#1- Set the background color to the default value
- 3.2) Step#2- Access the Header’s Motion Effects
- 3.3) Step#3- Motion Effects settings
- 3.4) Step#4- Elementor sticky header change color on the Scroll effects
- 3.5) Step#5- Shrink the Header’s height
- 3.6) Step#6- Shrink the Site Logo’s width
- 3.7) Step#7- Shrink the WordPress Menu and Change the Color
- 3.8) Step#8- Change the Button color on the scroll
- 3.9) Step#9- Change the search icon color
-
4)
How to swap the logo on the scroll in Elementor?
- 4.1) Step#1- Drag and drop the new container widget next to the logo and WordPress Menu
- 4.2) Step#2- Reposition your old logo
- 4.3) Step#3- Drag and drop the new image widget inside the new container
- 4.4) Step#4- Provide a unique CSS class to the new image widget
- 4.5) Step#5- Set the new image’s position to absolute
- 4.6) Step#6- Add custom CSS to change the logo
- 5) Full CSS Code Snippets
- 6) Different Elementor Sticky Header methods
One of the most common questions, I have found on Elementor Official Groups & GitHub is how to create Sticky Header with Elementor that can change the background color on scroll.
If you’re looking for a tutorial, you’re in the right place.
I have created a demo where you can experience. visit the link to experience Elementor sticky headers in action.
To create a sticky header with Elementor for myself. I have searched the internet and found a bunch of tutorials and most of them are simply copying and pasting the same CSS provided by the Official Elementor YouTube channels.
I thought why not create an in-depth how-to tutorial that is well-tested & it doesn’t rely on any JavaScript or 3rd parties plugins?
Basic requirements & knowledge:
- To fully utilize sticky effects functionalities in Elementor, you will need a Pro license.
- You need to enable Flexbox container features in Elementor (Backend) > Settings > Featured > to activate the Flexbox Container.
- 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. - You need to add vendor browser prefixes for better browser compatibility, you can use Autoprefixer which is easy and free to use.
Create the Header Template
- Activate the Default to New Theme Builder features.
- Activate the Flexbox Container features.
Step#1- Theme Builder
After you click the Theme Builder (reference above) in the side panel, you will be going to see all the Templates parts, you have created.
Step#2- Click the Add New button icon (+)
To create the site header, click the add new (+) icon and choose the header.
After you choose the header template, it will lead to Elementor’s Block. From there, you can choose the prebuilt templates or block or create the template from scratch or Buy it from my Unlimited Elements for Elementor store.
I create the template from scratch.
Step#3- Change the title and HTML tag for better semantics
Now, click the cog icon (settings) on the bottom left corner to open the Header’s settings from there you can change the title and the HTML tag for better HTML5 semantics.
Step#4- Create a structure
Step#5- Drag and Drop all the widgets inside the container
Now drag and drop all the widgets inside the page structure and it will look something like this.
- Site Logo widget
- Nav Menu/ WordPress Menu widget
- Button
Step#6- Place all the items horizontally and align the items in the center
- Click the Container’s Editing Handle
- Under Items change the direction to Row – Horizontal
- Set the Justify Content to space-between.
- Align items to the center, so the items will be aligned to the center
If you want to know what is going on, you can learn how CSS flexbox layout works.
It will look something like this after you set it up
Now we properly set up the design and layout of the template. Our next step is to assign unique CSS classes to the widget so that later on, we can use it.
Step#7- Assign unique CSS classes to the widgets & Container
Now assign unique CSS classes to the container and widgets (Button, Search icon, Navigation & Site Logo).
If you want to know how to assign unique CSS classes to your widgets, follow Elementor’s Tutorial on How To Use Selector In The Custom CSS Tab.
How to create a transparent sticky header with Elementor?
Step#1- Set the background color to the default value
By default, the background color of the sections/ containers/ widgets is automatically set to transparent. So just leave it as it is.
Sometimes a theme includes its background color to solid, if you have this issue you can use Chrome Dev tools – Inspect elements and you will find the CSS responsible.
This basically creates a transparent header
Step#2- Access the Header’s Motion Effects
To access the sticky effects features, you will have to click the Header’s Editing handle (see the attachment below), this will automatically open the advanced settings
- When you click the Editing handle.
- It will automatically open the advanced settings from there.
- Click the motion effects to enable the sticky options in Elementor and add set up the options.
Step#3- Motion Effects settings
- Set the sticky to the top (so it sticks the header on top when the user scroll down) &
- And Effects Offset to 100
Effects Offset” lets you determine when the effects will occur according to scrolling distance in pixels.
Step#4- Elementor sticky header change color on the Scroll effects
In our previous step, we enabled the sticky effect under motion effects. Now, let’s change the color of the background from transparent to solid color with CSS when users scroll down the page.
/*
* Define your own background color for default and sticky
* CSS Blend-mode rule is not included
*/
:root{
--site-transition: 350ms ease-in-out;
}
/*
* Elementor Sticky Header change color on Scroll
* Change the color from transparent to white
*/
.sticky-header-container{
background-color: #00000000;
transition:
background-color var(--site-transition),
box-shadow var(--site-transition);
}
.elementor-sticky--effects.sticky-header-container{
background-color: #ffffff;
box-shadow: hsl(0deg 0% 0% / 14%) 0 2px 40px;
}
If you follow the step properly, this will happens, when the user scrolls down the page:
- Change the transparent background color of the header to color and
- Add a box shadow to the container.
See the result below
If you want to spice things up, you can use the mix-blend-mode CSS property to change the color of the header.
/*
* CSS blend-mode is included
*/
:root{
--site-transition: 350ms ease-in-out;
}
/*
* Elementor Sticky Header change color on Scroll
*/
.sticky-header-container{
background-color: #00000000;
transition:
background-color var(--site-transition),
box-shadow var(--site-transition);
}
.elementor-sticky--effects.sticky-header-container{
background-color: #fffffff;
box-shadow: hsl(0deg 0% 0% / 14%) 0 2px 40px;
mix-blend-mode: difference;
/*
mix-blend-mode: normal;
mix-blend-mode: multiply;
*/
}
- Mix-Blend Mode CSS property (Demo)
If you recall properly, we have added CSS classes to the container, site logo, nav menu widget & button.
Step#5- Shrink the Header’s height
The CSS below is the same as the transparent Sticky header change color (Code snippets) but with an additional min-height & transition to the min-height CSS property.
/*
* Elementor Sticky Header change color on Scroll &
* Shrink sticky Header
*/
.sticky-header-container{
--min-height: 90px;
background-color:#fbfbfb;
transition:
min-height var(--site-transition),
background-color var(--site-transition),
box-shadow var(--site-transition);
}
.elementor-sticky--effects.sticky-header-container{
--min-height: 80px;
background-color: #F9E0E2;
box-shadow: hsl(0deg 0% 0% / 14%) 0 2px 40px;
}
Step#6- Shrink the Site Logo’s width
To reduce the site logo width, we can use the width CSS property but in-term of animation performance, CSS transform, and transform-origin property is far better.
/*
* Using transform CSS property is much better than width properties to scale in terms of performance
*/
.site--logo{
transform: scale(1);
transform-origin: center;
transition:
transform var(--site-transition),
transform-origin var(--site-transition);
}
.elementor-sticky--effects .site--logo{
transform: scale(.9);
}
Step#7- Shrink the WordPress Menu and Change the Color
In this step, we are going to shrink the navigation menu font size from 1.25rem to 1rem and change the color of the navigation & sub-menu icon (SVG) from white to black color when the user scrolls down.
/*
* Navigation
*/
.site-nav .elementor-nav-menu--main .elementor-item{
color: #000;
font-weight: 600;
font-size: clamp(1rem, 0.8182rem + 0.6061vw, 1.25rem);
transition:
color var(--site-transition),
font-size var(--site-transition);
}
.elementor-sticky--effects .site-nav .elementor-nav-menu--main .elementor-item{
font-size: clamp(1rem, 0.8636rem + 0.4545vw, 1.1875rem);
color: #fff;
}
/*
* Sub Menu icon
*/
.site-nav .elementor-nav-menu .sub-arrow {
color: #E23125;
fill: #E23125;
transition:
fill var(--site-transition),
color var(--site-transition);
}
.elementor-sticky--effects .site-nav .elementor-nav-menu .sub-arrow{
color: #000;
fill: #000;
}
/*
* Hamburger Menu, Close and open SVG
*/
.site-nav .elementor-menu-toggle{
background-color: #000;
transition: background-color var(--site-transition);
border-radius: 0;
}
.site-nav .elementor-menu-toggle .e-font-icon-svg,
.site-nav .elementor-menu-toggle .e-font-icon-svg{
fill: #fff;
color: #fff;
transition:
fill var(--site-transition),
color var(--site-transition);
}
.elementor-sticky--effects .site-nav .elementor-menu-toggle{
background-color: #fff
}
.elementor-sticky--effects .site-nav .elementor-menu-toggle .e-font-icon-svg,
.elementor-sticky--effects .site-nav .elementor-menu-toggle .e-font-icon-svg{
fill: #000;
color: #000;
}
Step#8- Change the Button color on the scroll
In this step, we are going to change the color of the button when users scroll the page.
/*
* Button
*/
.sticky-btn .elementor-button{
background-color: #000000;
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;
}
Step#9- Change the search icon color
In this step, we are going to change the color of the button when users scroll the page.
/*Search icon*/
.search-icon svg.e-font-icon-svg,
.search-icon i.e-font-icon-svg{
fill: #000!important;
color: #000;
transition: fill var(--site-transition);
}
.elementor-sticky--effects .search-icon svg.e-font-icon-svg,
.elementor-sticky--effects .search-icon i.e-font-icon-svg{
fill: #fff!important;
color: #fff;
}
How to swap the logo on the scroll in Elementor?
Let me tell you one thing straight, there are lots of tutorials out there that teach you how to use CSS content property to swap the logo.
The problem I found is that it, the logo was not-clickable when swapped and thus sucks. So please don’t follow the content CSS property tutorials.
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.
Or follow my tutorial
I searched a lot on forums, Facebook groups, and videos but there were no tutorials available at that time. After trial and error, I found the solution I needed ( read the comments) and it works wonders.
Step#1- Drag and drop the new container widget next to the logo and WordPress Menu
it will look something like this
Step#2- Reposition your old logo
Adjust your logo width, if you set it up.
Step#3- Drag and drop the new image widget inside the new container
Now, drag and drop a new image widget inside the new container and it will automatically stack together vertically as shown below.
Step#4- Provide a unique CSS class to the new image widget
Step#5- Set the new image’s position to absolute
When you set the image position to absolute, it will remove from the DOM tree and it will automatically stack together on top of each other if you didn’t create a container you will have to adjust a lot.
It will look something like this
Step#6- Add custom CSS to change the logo
.site--logo{
transform: scaleX(1);
transform-origin: center;
transition:
opacity var(--site-transition),
transform var(--site-transition);
}
.elementor-sticky--effects .site--logo{
transform: scale(.95);
}
.elementor-sticky--effects .site--logo-red{
opacity: 1;
transform: scale(.95);
}
.site--logo{
opacity: 1;
}
.site--logo-red{
opacity: 0;
}
.elementor-sticky--effects .site--logo{
opacity: 0;
}
.elementor-sticky--effects .site--logo-red{
opacity: 1;
transform: scale(.95);
}
Full CSS Code Snippets
/*
* Define your own background color for default and sticky
* CSS Blend-mode rule is not included
*/
:root{
--site-transition: 350ms ease-in-out;
}
/*
* Elementor Sticky Header change color on Scroll
*/
.sticky-header-container{
--min-height: 100px;
background-color: #00000000;
transition:
background-color var(--site-transition),
box-shadow var(--site-transition),
min-height var(--site-transition);
}
.elementor-sticky--effects.sticky-header-container{
--min-height: 90px;
background-color: #000000;
box-shadow: hsl(0deg 0% 0% / 14%) 0 2px 40px;
}
/*
* Using transform CSS property is much better than width properties to scale in term of performance
*/
.site--logo{
transform: scale(1);
transform-origin: center;
transition:
transform var(--site-transition),
transform-origin var(--site-transition);
}
.elementor-sticky--effects .site--logo{
transform: scale(.9);
}
/*
* Navigation
*/
.site-nav .elementor-nav-menu--main .elementor-item{
/*
* Add your own color
*/
color: #000;
font-weight: 600;
font-size: clamp(1rem, 0.8182rem + 0.6061vw, 1.25rem);
transition:
color var(--site-transition),
font-size var(--site-transition);
}
.elementor-sticky--effects .site-nav .elementor-nav-menu--main .elementor-item{
font-size: clamp(1rem, 0.8636rem + 0.4545vw, 1.1875rem);
color: #fff;
}
/*
*Hamburger Menu
*/
.site-nav .elementor-menu-toggle{
background-color: #000;
transition: background-color var(--site-transition);
border-radius: 0;
}
.site-nav .elementor-menu-toggle .e-font-icon-svg,
.site-nav .elementor-menu-toggle .e-font-icon-svg{
fill: #fff;
color: #fff;
transition:
fill var(--site-transition),
color var(--site-transition);
}
.elementor-sticky--effects .site-nav .elementor-menu-toggle{
background-color: #fff
}
.elementor-sticky--effects .site-nav .elementor-menu-toggle .e-font-icon-svg,
.elementor-sticky--effects .site-nav .elementor-menu-toggle .e-font-icon-svg{
fill: #000;
color: #000;
}
/*
* Button
*/
.sticky-btn .elementor-button{
background-color: #000000;
font-weight: 600;
border-radius:0;
border: none;
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;
}
/*Search icon*/
.search-icon svg.e-font-icon-svg,
.search-icon i.e-font-icon-svg{
fill: #000!important;
color: #000;
transition: fill var(--site-transition);
}
.elementor-sticky--effects .search-icon svg.e-font-icon-svg,
.elementor-sticky--effects .search-icon i.e-font-icon-svg{
fill: #fff!important;
color: #fff;
}
.site--logo{
transform: scaleX(1);
transform-origin: center;
transition:
opacity var(--site-transition),
transform var(--site-transition);
}
.elementor-sticky--effects .site--logo{
transform: scale(.95);
}
.elementor-sticky--effects .site--logo-red{
opacity: 1;
transform: scale(.95);
}
.site--logo{
opacity: 1;
}
.site--logo-red{
opacity: 0;
}
.elementor-sticky--effects .site--logo{
opacity: 0;
}
.elementor-sticky--effects .site--logo-red{
opacity: 1;
transform: scale(.95);
}
Different Elementor Sticky Header methods
- Elementor Hide Sticky Header on Scroll Down – Show on Scroll Up Elementor Codes
- Sticky On Scroll Up (wplovr)
- How to Create a Shrinking Sticky Header With Elementor
- Transparent Sticky header with free plugins
If you love it don’t forget to share or comment and wanted to support me you can purchase my template from my store.
Also, read all the comments if I made any mistakes or share your finding.
Thank you