This is one of the most common questions, I have found on Elementor Official Groups or any Elementor Facebook groups or GitHub on the topic of Sticky Header with Elementor by taking the question as an example, I was on a journey to learn on how to create sticky header from that I will tell how I achieved the effects.
All the code are credited to their respected blog post
It can be done the same effects using 3rd party addons or Plugins like Sticky Header Effects for Elementor (Work only if you have Elementor Pro installed).
But this blog post is all about Elementor pro: Custom CSS. You can use the plugin if you want.
If you are like me and doesn’t want to rely too much on Additional plugins.
This blog post is dedicated to you and I will show you how it is done step-by-step.
NOTE: All the symbol “/” are the path. and “-” is the sub-path
Select structure by clicking “+” icon (Here 2) /Adjust the column width as necessary /Edit Section/ Style /Background/ Background Type/ Set it none or Clear and Then add Z-index to 100 or more.
You need to add your own Media Queries. Follow Kevin Powell YouTube Video.
01
Create Elementor Header Template
Elementor/ My Templates /Header / Add New /Give a name for future reference (Main Header) /Create Template
02
Create Sticky Header with Transparent Background
Section/Motion Effects/ sticky/Enable Sticky -Top – Select the devices – desktop or mobile or tablet to enable sticky or Disable- Offset to “0” – Effect offset : 20px or more and
Don’t forget to add Section classes
03
Next step is to drag and drop Site logo widget and menu item but do not add any additional style to your logo and Menu because we will add CSS so we can control it. You can adjust the column width.
04
Create Sticky header with Background colour change when the user scrolls down & reduce min-height.
In this step, we need to create a sticky header that changes background colour when the user scrolls down.
To be considered:
- You need to add 90px min-height to the Section (your header requirement)
- Adjust your structure properly for better visual but DO NOT STYLE IT yet we will do it with CSS.
Site logo/Section/Advanced/Custom CSS
Tweak for performance
/*Logo before sticky enable & .logo is our CSS Classes*/
.logo .elementor-image img{
width:60%;
transition:width .3s ease-in;
}
05
For Site logo Widget
To shrink logo we need to add some CSS ,let add CSS classes as “logo” to the Site logo widget then advanced setting then CSS classes .
Site logo/Section/Advanced/Custom CSS
Tweak for performance
/*Logo before sticky enable & .logo is our CSS Classes*/
.logo .elementor-image img{
width:60%;
transition:width .3s ease-in;
}
Now we have to add Custom CSS for the Site logo widget to shrink the logo when “Elementor Sticky Effect” is applied.
/*Logo when Elementor Sticky Effect Applied & .logo is our CSS Classes*/
.elementor-sticky--effects .logo .elementor-image img {
width: 55%;/* adjust your width*/
}
Have you ever thought of enable the same effect as logo to menu when user scroll down.
Don’t worry i got it done for you and it is really simple too. It is the same process of adding CSS classes to Logo now add CSS classes to nav widget as “menu”,so we can add CSS and control. You don’t need JavaScript to handle it.
NOTE: Do not style anything(typography) if you do so you have to add !important on every css and that is not good at all.
.sec .elementor-nav-menu--main .elementor-item{
color:green;
font-size: 16px;
}
.elementor-sticky--effects .sec .elementor-nav-menu--main .elementor-item{
color:red;
font-size: 14px;
transition:color .3s font-size .3s ease-in;
}
06
How to Switch/Change "Logo" when user scroll down ? (Compatible with Firefox)
Curious right !
Don’t worry the same thing happened to us when someone’s showcase their website and saw the effect.Our reaction was like how can we achieve the same effect like other did . Sometime it came to our mind on how to do it but never pull it off.
Thing to consider –
- We will not going to use Site logo for this .
- We will use HTML widget and plain CSS and HTML no JS required. So don’t worry about the CSS i will provide you
- Drag and drop HTML widget
Add this HTML to your HTML widget- Follow the picture
- Add CSS to Change or Switch logo
.header(Add your own) is the CSS Classes we added above .
This CSS will help you adjust your logo width and it is before sticky effects.
/* header is the CSS class we defined above */
.header{
/*Adjust your width as your requirement*/
width:60%;
transition: width .3s ease-in;
}
Here is the CSS to change the logo when the user scrolls down.elementor-sticky--effects .header {
display: inline-block;
/*adjust your width*/
width:50%;
content: url("Your Image source");}
Here are the full CSS
.sec is the Section classes you have added to your Header CSS classes*/
/* Elementor YouTube Channel*/
selector.elementor-sticky--effects{
background-color: rgba(133,130,255,0.5)!important
}
selector{
transition: background-color .4s ease !important;
}
selector.elementor-sticky--effects >.elementor-container{
min-height: 80px;
}
selector > .elementor-container{
transition: min-height .1s ease !important;
}
/* Shrink logo*/
.logo .elementor-image img{
width:60%;
transition:width .3s ease-in-out;
}
.elementor-sticky--effects .logo .elementor-image img {
width: 55%;
}
/* Shrink Nav Menu*/
.sec .elementor-nav-menu--main .elementor-item{
color:green;
font-size: 16px;
}
.elementor-sticky--effects .sec .elementor-nav-menu--main .elementor-item{
color:red;
font-size: 14px;
transition:color .3s font-size .3s ease-in;
}
/* Change logo when elementor sticky enable*/
/* header is the CSS class we defined*/
.header{
/*add your width adjustment*/
width:60%;
transition: width .3s ease-in;
}
.elementor-sticky--effects .header {
display: inline-block;
width:50%;
content: url("add your image source here to change logo when scroll down");
}
Result
If you like 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
