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.
- Go to advanced > motion effects > sticky > top
- Effects offset and choose the amount of pixels you want the page to scroll before the effect happens.
- Go to Advanced > Custom CSS and paste in the below code
- 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; } |