Transparent header in Elementor – Change background colour on scroll

1. Add Motion Effects > Sticky > Top
2. Add Effects offset > 150
3. Add the following CSS code in the elementor CSS area

Just add selector.elementor-sticky–effects before anything you want to change.

.elementor-sticky--effects .logo {
display: none !important;
}



/*Change background-color when header turns sticky*/
.elementor-sticky--effects{
background-color:#dbe9f5!important;
}
selector{
transition: background-color 1s ease ;
}


Important
if you are finding it difficult to edit pages with a transparent header then use this cSS code below and when editing it will make the page act as normal. When displaying it will pull the page up as wanted behind the menu to create the transparent header.

body.elementor-editor-active selector {
margin-bottom:0px !important;
}