To change Burger Plus icon color, when users scroll to Light Section.
You can use this code to Code Injection > Footer.
If code doesn’t work, you can comment below, message or email me.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(window).scroll(function() {
const targetSections = $('[data-section-theme="white"]');
const header = $('#header');
const scrollPosition = $(window).scrollTop();
const headerHeight = header.outerHeight();
let isInAnySection = false;
targetSections.each(function() {
const section = $(this);
const sectionTop = section.offset().top;
const sectionBottom = sectionTop + section.outerHeight();
if (scrollPosition >= sectionTop - headerHeight && scrollPosition <= sectionBottom) {
isInAnySection = true;
header.addClass('white-header');
return false;
}
});
if (!isInAnySection) {
header.removeClass('white-header');
}
});
});
</script>
<style>
body:not(.header--menu-open) header.white-header div.burger-inner>div {
background-color: #000 !important;
}
</style>
Result
Before
After
