hamburger menu colour change on scroll (mobile header)

It looks like your hamburger menu already changes to black. You can use this code for the icon.

.she-header .elementor-icon {
    color: #000000 !important;
}

I hope this helps.

Thanks, but it seems the code simply changes the icon immediately.

Rather, I want the icon to change colour only when the user scrolls down

Also, I would appreciate your code for the hamburger menu because the one I used leaves a grayish background behind and I cant seem to get it off yet.

The class “she-header” isn’t applied to the header until the page has scrolled the set distance. I can see that working in the code. As I scroll up and down on your site that class is added and removed. It’s working correctly for me on several devices. Have you cleared your browser cache?

For the hamburger menu it looks like that is the default elementor background color. You might have to set it to transparent. I believe it will be grey even if left blank.

If you want to remove the background color manually you can use this code.

.elementor-menu-toggle {
    background-color: rgba(0,0,0,0) !important;
}

This is the code I would use to change the hamburger icon color…

.she-header .elementor-menu-toggle svg {
    fill: #000000 !important;
}

It looks like you were using the global variable for the color. If you want to keep that color attached the the global color then use this code instead.

.she-header .elementor-menu-toggle svg {
    fill: var( --e-global-color-secondary ) !important;
}

Let me know if this works for you.

I just noticed that your icon widget has the class “she-header” added to it. Is that set in the advanced tab for the widget? That should be removed if so.

That would cause the code I gave you not to work and also make the icon sticky.

Another thing, I see that the links stay white after the header changes. Instead of this code.

.elementor-sticky--effects .menutextcolours ul li a {
    color: #000000 !important;
}

Use this instead to change the text at the same time as the background.

.she-header .menutextcolours ul li a {
    color: #000000 !important;
}

.elementor-menu-toggle { background-color: rgba(0,0,0,0) !important; }
The code above solved the problem of gray background for the hamburger, I feel so relieved.

still yet to solve the issue with the icon
I removed the class added at the widget level and the code still didnt work

probably not working because of how I am applying it, please can you explain the proper way to apply the css code?

I see 3 different headers in the code. The plugin doesn’t support being activated on more than one section/container. That might be causing code conflicts.

There are several ways to add the css. You can add it to the header under the advanced tab > custom css, site settings(top left hamburger menu) > custom CSS, or wp dashboard > appearance > customize > additional css . You could also use elementor custom code or code snippets plugin. I personally recommend putting it under your site settings or in the customizer.

I used 1 header for desktop and a separate header for mobile.

was using the 3rd header to test out extra ways of putting in the CSS. I eventually got it working by removing the class both at the container and widget level. I only applied the css code directly at the widget level via custom css.

I sincerely appreciate the quick replies.

Can some of the questions asked be put directly as options in the plugin please. I Know that would save a lot of time for less code inclined users.

Thanks.

No problem. I have a pro version of the plugin with all of those features and more but it became too much to keep up with. I’m working on possibly releasing a less complex pro version to start. Then I can add features one at a time and keep the bugs to a minimum.

Anyway, I’m happy to help.