All things Shopify and commerce
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"
Solved! Go to the solution
This is an 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!
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
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 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
This is an 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!
@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
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024