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.

To begin with, create your hero section

Simple Elementor Transparent Header Changing Background Color

Then, above it, create a new section

This is where the Elementor sticky transparent header will be. Give that section this width setting.

Simple Elementor Transparent Header Changing Background Color

Create your header within that Elementor Section

Give that section  the class 'stickyheadersection' . Adjust the padding to what you need. 

Simple Elementor Transparent Header Changing Background Color

When you are done, add an empty section above everything else

Set these parameters for that section. This empty section is necessary so that the sticky background is not activated while you are at the top of the page. It won't show on the front-end.

Simple Elementor Transparent Header Changing Background Color

Now, set the Elementor header section to sticky.

Set it sticky. (This is an Elementor Pro feature)

Elementor Sticky Header Changes Logo Size and Position

And give it negative margins to bring it above the hero section. Also give it a z-index value of 999.

Simple Elementor Transparent Header Changing Background Color

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--active.stickyheadersection {
background-color: #fff;
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--active.stickyheadersection a {
color: #000!important; /* Change this to the color of the links when sticky is active */
}

Et voila! Thanks for reading!

< News >

Enjoyed this tutorial? Get more awesome designs, right in your inbox!

No spam, not more than one weekly email.

Addons Resources
Addons
Resources
Addons
Finder Tool
Addons
Discount Codes
Addons
Review
< Recent Designs >

Visit the Learning Center For More Designs !

Created by <Element Or Codes>