Elementor: Change Color of Header and Show-Hide Elements On Scroll (Good for Transparent Headers)

Useful for transparent headers.

Under ‘Motion Effect’ settings, below ‘Offset’you must set the ‘Effects Offset’ into ‘1’ or larger. Otherwise, the CSS won’t work.

					/* This CSS is to change color */
.elementor-sticky--effects { background: #181818 /* Change the color */ !important;}

/* This CSS is to add border on scroll */
.elementor-sticky--effects { border-width: 0px 0px 1px 0px;

/* This CSS is hide elements */
.elementor-sticky--effects .hideme {display: none}

/* This CSS is show elements */
.showme {display: none}
.elementor-sticky--effects .showme {display: block}

/* To Smooth Things Out */
.elementor-sticky--effects, .hideme .showme {
  transition: 0.5s all ease-in-out;

You don’t need to add all the codes. But if you do, here’s an example of the result:

Scroll to change section color.

That guy has a CSS Class: .hideme

Arrow's CSS Class: .showme

Hero Title Here

Catchy subtitle

Use drop shadow instead of line for header border. Replace ‘border on scroll’ line with:

					selector.elementor-sticky--effects { box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.25);

Hero Title Here

Catchy subtitle