Hamburger icon for the sidebar is not visible

[RHEE (SANG HYUN RHEE)]

I’ve just setup the sidebar feature, and figured out the hamburger icon is not visible, like this:

But when I hover my mouse in the box, it somehow appears its icon:

How can I show the icon even when I’m not pointing my cursor in the box?

[Don]

Hello,

It seems to your --header_primary-low-mid (which is the default header buttons) color variable is same color as --header_primary (header) color (#fff). This is why the sidebar icon is not visible. As I see on your site you are using the --tertiary color variable to the other header icons. You can also change the sidebar button color. Or you can change the header_primary-low-mid color to make it visible.

Create a new theme component or add this to an existing one

Desktop > CSS

.header-sidebar-toggle {
  button {
    .d-icon {
      color: var(--tertiary);
    }
  }
}

[RHEE (SANG HYUN RHEE)]

Thanks for your prompt reply!
But I still cannot find the right variable you are mentioning:

Which one?

[Don]

Well, as I see non of these can controls header buttons color. This is a custom theme where you can change the colors. I think this is a remote theme so probably you cannot change the color variable color but you can check it on the /admin/customize/colors (Admin > Customize > Colors) page. On that page select the Color Palette you use and search for the header_primary-low-mid variable. If you cannot change it then you need to contact with the theme creator.

OR

You can try to add a new theme component which will change the sidebar button color.

1. Go to /admin/customize/themes/
   Customize → Themes
2. Click the Components tab and then the Install button
3. On the popup window click + Create new tab and type the new component name.

4. Click Create button.
5. The component created. Now select which theme(s) you want to activate it.
   
6. Click the Edit CSS/HTML button.
   
7. Click the Desktop tab and paste the below code to the CSS section.

.header-sidebar-toggle {
  button {
    .d-icon {
      color: var(--tertiary);
    }
  }
}

8. Click Save button. Done

[RHEE (SANG HYUN RHEE)]

Amazing, thanks for your help. It perfectly solved my issue =]