Useful for transparent headers.

IMPORTANT

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

CODE

/* 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;
}

DROP SHADOW

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);