Custom CSS To Change Header Based On Background colour

Replies: 0

Hello,

I am using Elementor (free version) to build my site and have made a custom header using ‘Header, Footer & Blocks for Elementor’. The header is transparent and sticky, and the text is currently white. However, as I scroll through my site, some sections are dark while others are light and the white header text gets lost in the light sections. Is there a way, using custom CSS, to have the header text change color based on the luminance values of the background? As I am in the free version of Elementor, I am using the ‘Simple Custom CSS and JS’ plugin for CSS and have given the header text the CSS class ‘custom-header’.

Thanks so much for your help! 🙂