I need help with fixing my menu drawer background and icon

[DriftArmy]

Hello,

I need help with building a store.
I recently made the background a picture and changed the header to transparant.
But now my hamburger icon is not visible anymore, only for a short time when closing it.
And the menu itself, the opacity needs to be at 100.

Can someone collaborate and change the code somewhere to fix this?

Thank you!

This is the website:
Soulful Journey

[DriftArmy]

The weird thing is, all the other icons are showing. I even changed the color of all the icons

[DriftArmy]

Thank you for your response. I understand, kind off. Now I need to find where it is. I tried the container in assets about the menu drawer, i could not find anything there that fixes it. 

[Moeed]

Hey @DriftArmy 

Follow these Steps:

1) Go to Online Store
2) Edit Code

3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
header-drawer * {
    opacity: 1 !important;
}
</style>

RESULT:

If I managed to solve your problem then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[tim · Accepted solution]

In your assets/base.css there is this code:

opacity must be 1: https://github.com/Shopify/dawn/blob/main/assets/base.css#L2716-L2723 

/* Header menu drawer */
.header__icon--menu .icon {
  display: block;
  position: absolute;
  opacity: 1;
  transform: scale(1);
  transition: transform 150ms ease, opacity 150ms ease;
}

Also, when your menu finally works, it's on the transparent background:

So this line https://github.com/Shopify/dawn/blob/main/assets/component-menu-drawer.css#L37 

must be changed from:

 background-color: rgb(211 204 204)(--color-background));

to:

 background-color: rgb(211 204 204);