Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Transparent mobile menu drawer (Dawn)

Solved

Transparent mobile menu drawer (Dawn)

blake1798
Excursionist
21 0 4

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:

Screen Shot 2023-01-05 at 1.18.43 PM.png

 

Instead, it currently looks like this:

Screen Shot 2023-01-06 at 8.31.19 AM.png

 

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

Accepted Solution (1)
Litos
Globetrotter
688 169 149

This is an accepted solution.

Hi @blake1798,

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

Screenshot.png

Code:

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

Hope it helps!

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.

View solution in original post

Replies 6 (6)

GemPages
Shopify Partner
5625 1262 1254

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
blake1798
Excursionist
21 0 4

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

 

Screen Shot 2023-01-10 at 4.17.16 PM.pngScreen Shot 2023-01-10 at 4.17.28 PM.png

Litos
Globetrotter
688 169 149

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!

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
blake1798
Excursionist
21 0 4

@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

 

Screen Shot 2023-01-10 at 4.17.28 PM.pngScreen Shot 2023-01-10 at 4.23.03 PM.png

Litos
Globetrotter
688 169 149

This is an accepted solution.

Hi @blake1798,

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

Screenshot.png

Code:

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

Hope it helps!

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
blake1798
Excursionist
21 0 4

@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