Menu
Welcome to You!
Be with the calm of nature in our wonderful lake rental
Simple Elementor Transparent Header Changing Background Color On Scroll
No extra plug-ins required! Elementor Pro Required.
You can also check out this related premium tutorial to have even more control over your design:
To begin with, create your hero section
Then, above it, create a new section
This is where the Elementor sticky transparent header will be. Give that section this width setting.
Create your header within that Elementor Section
Give that section the class ‘stickyheadersection’ . Adjust the padding to what you need.
Now, set the Elementor header section to sticky.
Set it sticky. (This is an Elementor Pro feature)
And give it negative margins to bring it above the hero section. Also give it a z-index value of 999.
Then, set 'Effects Offset' to '30', or your preferred value
This will determine when it will go from transparent to the color you will set in the code.
Finally, add this CSS to the place of your choice
Adjust the background color to your desired value. When scrolling down, the Elementor transparent sticky header will change to that color.
.stickyheadersection {
transition: background-color .4s ease;
}
.elementor-sticky--effects.stickyheadersection {
background-color: #fff; /* Background color when sticky */
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.29); /* remove if you don't want a box shadow on the sticky header */
}
.elementor-sticky--effects.stickyheadersection a {
color: #000!important; /* Change this to the color of the links when sticky is active */
}
Exactly what I was looking for, thanks for sharing!
Welcome!
Hello, does this create the same type of header you have on this website? When i set the the negative padding at the top, the header changes to the colour like its already started scrolling. What am i doing wrong?
I updated the tutorial with slightly different instructions, and it is a better and more resilient way to make this! Let me know if it works for you. Start from fresh, as the code is different now.
Maxime Desrosiers Ahh yes, i think that along with adjusting the effect offset has made it work, thank you!!
Oliver Ramsey Great!
Awesome, thank you very much, this is just what I needed for my header.
Welcome!
Thankssssssssssssss!!
Welcome
Excuse me! I am a beginner... what do you mean "add this CSS to the place of your choice". It should be in the sticky section > advanced > custom css or in another place? Thanks a lot!!!!!
done it!!! <3 i forgot adding the css class!!!! super thanks!!!!!!
Great work Victoria! Don't hesitate with any other questions!
Is it possible to change header fonts and logo color depending on a hero slide background colors? An example is here pentagram.com
I also wonder this. It looks so cool.
Hello - this works great! but the button border doesn't change colour. Do you have any CSS for the button border colour also changing on sticky header? Thanks!
My CSS worked - I added border-color: #000!important; 🙂
Thank you!
Is there any way to change the hamburguer menu color?
Hey Jose!
Yes I have a tutorial about this (and it allows for much more!) here : https://element.how/elementor-header-change-color-on-scroll/
I can't seem to get it to work. Nothing happens.
Hey Spike!
Do you have a URL I can inspect to see what might be the issue?