Burger Menu not changing colour

Design help General
1

Hi :slight_smile:

On mobile there is a white burger menu in the top right hand corner. When you top it and the menu opens, I was hoping that I could get the burger menu to turn black (so a user knows to close it), but I’m not sure how to do it. Anyone able to help please?

Link:

https://preview.webflow.com/preview/thegoldstonewedding?utm_medium=preview_link&utm_source=designer&utm_content=thegoldstonewedding&preview=7e97af25d7f48e1c195c55efe310d1fc&mode=preview

Thanks! :slight_smile:

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

I see the burger menu is an icon (as in an SVG or PNG image), which you obviously cannot control.
There are 2 ways to solve your problems:

  1. In your custom code, add the following line in you “head” tag:

    <style>.icon {mix-blend-mode: exclusion;}</style>
    White will look black when the background is grey. But it will look something like orange if the background is the blue image.

  2. The longer yet much better way to do this:

  3. Remove the icon inside the burger menu button.

  4. Give the “menu button 2” div a specified width and height (let’s say 50x50 pixels)

  5. Add a wrapper div inside the “menu button 2”, give it 100% width and height, and make the display flex with vertical layout (see screenshot below)

  6. Inside that wrapper div, you will then add 3 same divs, which will be the bars. style them as you please, and space them out with the margins, and give them white background.

  7. Last step is to add an “on click” animation on the menu burger: 1st click (when it opens menu), have it switch the color of those white bars to black, then 2nd click, change back to white.

Screen Shot 2020-10-29 at 11.53.24 AM

Voila!
Cheers.

3

thanks so much! :slight_smile: