Transparent mobile menu drawer (Dawn)

[blake1798]

I have a transparent header on the home page of my website, and would like the menu drawer on mobile to also be transparent with a slight blur like this:

Instead, it currently looks like this:

Site is https://au-ther.com/ and password is "password123"

[GemPages]

Hello @blake1798 

I would like to give you the recommendation to support you so kindly follow steps below:

1. Go to your Online store > Themes > Edit code
2. Open your theme.liquid file
3. Paste the below code before </body> :

<style>
#menu-drawer,.menu-drawer__inner-container{
background:transparent !important;
}
.menu-drawer__navigation-container{
background:#000000 !important;
opacity:0.7 !important;
}
</style>

 I hope the above is useful to you.
Best regards,
GemPages Support Team

[blake1798]

@GemPages this worked for the home page, but now the menu text is not visible on the other pages

[Litos]

Hi @blake1798,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.menu-drawer {
    background: #0000006b !important;
}

Hope it helps!

[blake1798]

@Litos similarly to GemPages solution, this worked on the home page but made the menu text black on all other pages, which isn't really visible

[Litos · Accepted solution]

Hi @blake1798,

Please go to layout > theme.liquid file and add code here:

Code:

{%- if request.page_type == 'index' -%}
        .menu-drawer {
          background: #0000006b !important;
        }
      {%- else -%}
        .menu-drawer {
          background: #fffffff0 !important;
        }
      {%- endif -%}

Hope it helps!

[blake1798]

@Litos it's still transparent with black text on non-index pages 😞

Edit: it works! I just needed to remove the code you gave me previously from the bottom of the base.css file