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 these settings

Simple Elementor Transparent Header Changing Background Color

Insert an inner section within this section, and create your header within it

Give that inner section these settings, the class 'stickyheadersection' and set the margins to '0' 

Simple Elementor Transparent Header Changing Background Color
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

your navigator should now look like this

Simple Elementor Transparent Header Changing Background Color

Now, go back to the transparent header section

Not the inner section, but the parent section. 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: black;
}

.elementor-sticky--active .stickyheadersection a {
color: orange!important;/*adjust the color to yours*/
}

Et voila! Thanks for reading!

< News >

Get awesome new designs right in your inbox!

No spam, not more than one weekly email.

< Support me>

Support my work by buying Elementor Pro , or addons, through my links

< Recent Designs >
Change CSS of Elements by Using the Inspect Tool
Learn

Change CSS of Elements by Using the Inspect Tool

One of the most frequent request by people using Elementor is how to change the look of certain specific elements. And the most frequent answer is CSS.

The problem is that most people don't know how to properly use the Inspect function to target the right element, and modify the CSS. Here is how.

Read More »

x

Free Templates!

Subscribe to my news letter to receive the FREE template of this animated corner gift!

present

Visit the Learning Center For More Designs !

Created by <Elementor Codes>

Leave a Reply

Your email address will not be published. Required fields are marked *