How can I make a dropdown menu background transparent with CSS?

Store Design

Topic summary

A user seeks help making a dropdown menu background transparent on their Shopify store. The menu appears in the top-left corner of their site.

Proposed Solutions:

  • One suggestion involves adding semi-transparent background color using CSS variables: background-color: rgb(var(--background-color), 0.);
  • Another recommends targeting .header__icon[aria-expanded='true']::before with background: transparent; in the main CSS file
  • A screenshot was shared showing where to locate the relevant CSS class in the base.css file

Current Status:
The issue remains unresolved. The original poster tried multiple approaches, including adding the suggested CSS code in various locations within the section mentioned, but none of the solutions worked successfully. They’re unable to locate some of the specific CSS classes referenced (like .menu-reward-u).

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
2

You can make it half-transparent.

Find your css file, and add to the class .menu-drawer this:

background-color: rgb(var(--color-background), .0);