Create a Color Changing Sticky Header Without Code in Elementor [PRO]

***2023 Update: To add scrolling effects at 02:55, Transparency is now located in Advanced ► Motion Effects ► Scrolling Effects ► Transparency

In this Tips & Tricks video, we’ll create a sticky header in Elementor that changes color transparency as visitors scroll through our site.

The tutorial will cover:
✔︎ Sticky header uses and benefits
✔︎ Make a header sticky
✔︎ Changing color transparency on scroll
✔︎ And much more!

Don’t forget to subscribe to our channel!

Chapters:
00:00 - Intro
00:16 - Why use a sticky header
01:37 - Set background transparency
02:05 - Make the header sticky
02:32 - Set background color change
02:55 - Add Scrolling Effects

[Elementor]

***2023 Update: To add scrolling effects at 02:55, Transparency is now located in Advanced ► Motion Effects ► Scrolling Effects ► Transparency

[Nadworks-cb]

How would we now change the logo (i.e. if we want to switch the header colour to white and swap the logo with its inverted version)?

[MinisterioÚltimoPacto]

Literally the easiest tutorial on this on Youtube. No code, or plugin. Outstanding!

[rswebmarketing]

There is a problem in your tuto. When we first arrive on the website, the black color on the background appears, then transparency arrive after 1 sec. The black background must arrive only if the visitor scroll, not when he first arrive on the website.

[kwdigitalsolutionswebsited]

Wow, so much easier than in the past where I've had to use CSS and offsets etc. thanks for the great video.

[mmb]

3:31 Not looking good (Test that page on a web browser and you will see the issue. Works great in the editor, like you showing in the video)
On testing this, I discover that there is an issue with this feature.
Lets assume that you select green (as background) for the fade in color, then when the page initially loads, it shows the heading background as green, then it quickly fades to transparent. After that initial load it works, but the fact that it shows that initial green, makes this feature unusable on a live production site.
Guess it's back to the CSS

[deniseho]

How do I make the transparency effect only on the background colour? The logo, menu, and other elements in the header become transparent along with the background and only appear after scroll.

[itsallaboutnatural]

Just an update to this very helpful video. In the latest version of Elementor PRO 3.16.xx, use the transparency effect in the style tab, not in the advanced tab.

[williammendonca]

It would be amazing to see this Tips & Tricks videos subtitled in other languages, the reach for the plugin to reach more people would be very expressive.

[seectmedia]

This is great but what if I want to change the text on scroll is that possible from say white (when its transparent) to black (when the background changes color?) that is where this really makes it.

[baderna]

Thank you for all the effort that you're puting into the development of Elementor. I JUST HOPE, ONE DAY, YOU'RE GONNA REALIZE THAT 90+% OF THE WEB VISITORS ARE USING A MOBILE (but you still insist with the desktop tutorials, desktop tweaks etc..) ...

[iTradeAIMS]

Thanks, I applied this to my current website and instantly saw great improvement.

[huynguyen-fdpw]

For anyone having issues with transparancy hiding the logo and navigation - make sure to use the motion effects/transparancy in Style NOT Advanced.

[BondJamesBlond]

Thanks for this video! Would you be able to also please cover how to change the text color on scroll - as an extension of this header behavior? Thanks!

[koefdamcityroleplay]

My text also becomes transparent like the background. I followed all the steps exactly as in the video, does anyone know where it went wrong?

[mandalaprayoga]

need more tutorial for sticky header, shrink header, change color header and font header... need more !!!

[anowerhossen]

Thanks Thanks, I applied this to my current website and instantly saw great improvement.

[mr_oizofpv]

it doesn't work as the Trasparancy affects all the elements in the container, i.e. logo and menu... at least after the new broken updates by Elementors devs... i'm starting to get really bored of Elementor, it's Bugementor now.

[seppneimusser]

I was lost before I saw your tutorial^^ Thank you so much!

[Dylson]

2023 Sept: Great tutorial video! Still works like a charm even with the new elementor layout! Thank you!