Can I make the menu drawer transparent without blurring the website?

Store Design
1

Hello

Would it be possible to have the menu drawer transparent?

And when the menu opens, having the website not blur, like in the below image?

Screenshot 2023-04-26 at 7.06.14 am.png
Screenshot 2023-04-26 at 7.06.14 am.png3204×1926 344 KB

Website: yohandeschamps.net

Theme: impulse.

Thank you in advance

2

Hi @YOYO74

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Richard | PageFly

3

Hello @YOYO74 ,

You can try to follow these steps:

  • Add the following CSS to your theme’s stylesheet:
.menu-drawer {
  background-color: transparent;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  backdrop-filter: blur(5px);
}

.site-header {
  position: relative;
  z-index: 10000;
}
  • Create a new section for your menu drawer if you haven’t already, and assign it to your header or another appropriate location on your website.
  • Add the following Liquid code:
  • Save and preview

Let us know if you need any further support.

Ali Reviews team.

1 Like
4

Hi @YOYO74

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the theme.css file:
.drawer, .mobile-nav>.mobile-nav__item {background-color: transparent !important;}

Regards,

San