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

Store Design

Topic summary

A user wants to make their menu drawer transparent and prevent the website from blurring when the menu opens on their Impulse theme Shopify store.

Proposed Solutions:

Three different community members offered CSS-based approaches:

  • PageFly-Richard suggested adding custom code to the theme.liquid file above the </head> tag, though the specific code snippet appears corrupted in the thread.

  • ireni-vintage recommended adding CSS to the stylesheet targeting .menu-drawer with background-color: transparent and backdrop-filter: blur(5px), plus creating a new menu section if needed.

  • INA_MSWEB proposed adding CSS specifically to the theme.css file: .mobile-nav, .mobile-nav__item { background-color: transparent !important; }

Status: Multiple solutions provided but no confirmation yet on which approach successfully resolved the issue. The discussion remains open with the user yet to report results.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
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