在滚动条上更改汉堡菜单的颜色

Question

I have built a site on selfhosted WordPress (with Divi). The site uses two menu logos, one for primary menu bar and the second one for the fixed header. The logo changes on scroll with this code:

<script>
    
jQuery(window).scroll(function () {
    if (jQuery(window).scrollTop() > 50) {
        jQuery('#logo').attr('src','link_to_fixed_header_logo')
    } else {
         jQuery('#logo').attr('src','link_to_primary_top_menu_logo')
    }
});

</script>

I would like the site to change color of the hamgurger button on scroll in the mobile version. The inspect tool shows that the color is defined by these lines:

body.et_divi_100_custom_hamburger_menu .et_divi_100_custom_hamburger_menu__icon div {
    background: #000!important;

I use this CSS to make the hamburger button black. Is it possible to change the CSS through the JQuery code, so that the button is white on top, and turns black on scroll?

Answer 1

Sure, you can modify your Javascript to also set the color of the hamburger menu using your existing scroll handler. You might be able to make the selector at the top there a bit nicer, but I don't know the structure of your page.

jQuery(window).scroll(function () {
    var hamburgerImage = jQuery('body.et_divi_100_custom_hamburger_menu .et_divi_100_custom_hamburger_menu__icon div');
    if (jQuery(window).scrollTop() > 50) {
        jQuery('#logo').attr('src','link_to_fixed_header_logo');
        hamburgerImage.css('background-color', '#FFF');
    } else {
        jQuery('#logo').attr('src','link_to_primary_top_menu_logo');
        hamburgerImage.css('background-color', '#000');
    }
});

Answer 2

This can be accomplished just with CSS, no need for JS.

DIVI, on scrolling, adds automatically a class to the header element, the class is .et-fixed-header .

However, to enable this you should enable the option "Fixed Navigation Bar" from Backend->DIVI->Theme Options

Use this to change the color: body.et_divi_100_custom_hamburger_menu header.et-fixed-header.et_divi_100_custom_hamburger_menu__icon div{}