How can I alter hamburger menu color based on the background?

Store Design
, , , ,
1

Hello everyone,

Through my theme settings I have enabled transparent header, which turns all the contents white when on a background image, and black when scroll or on background colour with no image present.

My hamburger menu has been coded to behave the same using the code below…

.icon-menu .icon-bar, .icon-menu .icon-bar::before, .icon-menu .icon-bar::after {
background-color: #fff;
}
.header–has-scrolled .icon-menu .icon-bar, .header–has-scrolled .icon-menu .icon-bar::before, .header–has-scrolled .icon-menu .icon-bar::after {
background-color: #000;
}

Only problem is, it still turns white when the background has no image (making it invisible)

How can I make the hamburger menu change colour based on what the background is (just like the default header settings for everything else)

Thank you !!

2

Hello there

  1. In your Shopify admin panel, go to “Online Store” > “Themes” and click on “Actions” > “Edit code” for the theme you’re working on.

  2. In the file list, open the “theme.scss.liquid” file or create a new one if it doesn’t exist.

  3. Add the following CSS code to change the color of the hamburger menu icon based on the background color:

.site-header {
  .icon-hamburger {
    color: #fff; /* Default color for the hamburger menu icon */
  }
  
  /* Change hamburger menu icon color on a dark background */
  &.site-header--dark .icon-hamburger {
    color: #000;
  }
  
  /* Change hamburger menu icon color on a light background */
  &.site-header--light .icon-hamburger {
    color: #fff;
  }
}

In this example, the default color for the hamburger menu icon is set to white. The color is changed to black when the background color is dark (using the “site-header–dark” class) and to white when the background color is light (using the “site-header–light” class).

  1. Save the “theme.scss.liquid” file and preview your store. The hamburger menu icon should now change color based on the background color.
3

It still doesnt seem to work if there is a background image in the first section, instead it behaves just like the code already in effect.

How can I make it say “be white by default, but only if only the first section has fullscreen background image, otherwise be black by default”

Thank you!