Change Burger color on sticky menu

How To
1

Somehow I am too dumb to find the option to set a different color for the burger icon. I have a sticky navigation and need a different color for the burger icon when scrolling. How can I do this? Thanks.

2

The only way that I have found to affect the mobile burger menu is trough CSS. For example:

.bricks-mobile-menu-toggle {
color: red;
}

If there is some kind of gui control for it that we have not found, please let us know.
Good luck

1 Like
3

You can add scrolling class and !important to your color (not good but that’s the only way I found)

.scrolling .bricks-mobile-menu-toggle {
color:green!important;
}

1 Like
4

I have also managed to achieve some of the things I want using CSS. Can you maybe tell me what to use when not scrolling? Something like .sticky or so but I cannot find it. Thanks.

5

not sure to understand. What are you trying to achieve? once you started to scroll some classes are added but they are not disappearing if you are stopping scrolling. They disappear once you are back on top.

6

Here is a code to change the color on scroll (to green), when user stop scrolling, color get back to original (var(–bricks-color-umstnp))

const toggleColor = document.querySelector(".bricks-mobile-menu-toggle");
let timeout = false; 

window.addEventListener('scroll', function () {
  if (timeout) {clearTimeout(timeout); timeout = false;}
  toggleColor.style.color = 'green';
  timeout = setTimeout( function () {
    toggleColor.style.color = 'var(--bricks-color-umstnp)';
  }, 1000);
});