Change the header background colour on scroll in Elementor

This tutorial explains how to easily change the colour of your sticky header on scroll,  in WordPress site, using Elementor.

I’ve found a great video (below) on how to change the background of your header when scrolling with Elementor Pro sticky scroll. I’ve added the steps here so I can reference it quickly in the future, but for first timers, please watch the video to really understand the process.

Click on the edit header section and set up sticky.

1. Go to advanced > motion effects > sticky > top
2. Effects offset and choose the amount of pixels you want the page to scroll before the effect happens.
3. Go to Advanced > Custom CSS and paste in the below code
4. change the colours you desire in the CSS (highlighted in green)

Paste this code into the custom CSS.

CSS code:

/* — Changing the menu background on scroll effect — */ .elementor-sticky–effects {    background: #3E3EF5!important; /* change the background color here*/ } .elementor-sticky–effects .sticky-menu-items ul li a /* change the menu text color here*/ {    color: #fffffff!important; } .elementor-sticky–effects, .sticky-menu-items ul li a {   transition: .5s all ease-in-out; }

Here’s Jeffrey’s video from Lytbox, who explains this process in detail.

design, freelancer, graphic