Search bar and menu messing up

Shopify Discussion

Topic summary

  • Issue: The store’s menu background appears transparent, with the bottom portion still semi-transparent.
  • Attempted fix: A third-party app was used to force a white background, which helped but did not fully resolve the transparency at the bottom.
  • Evidence: A screenshot is provided and central to diagnosing the visual issue.
  • Status: No solution or cause identified yet; the thread remains open for troubleshooting suggestions (likely requiring theme/CSS adjustments).
Summarized with AI on December 12. AI used: gpt-5.
1

My menu is like transparent I’ve had to use a 3rd party app to at least show the white but it’s still sort of transparent at the bottom

IMG_1392
IMG_13921290×2796 440 KB

1 Like
2

Hey,

Can you paste the code that shared below in the end of main.min.css

.menu-drawer__navigation-container {
    background: white;
}

Results:

image
image404×820 47.3 KB

4

Your theme uses CSS variables which are not defined – looks like some code is missing from your Liquid files, like layouts/theme.liquid.

As a fix, you can add this code to the “Edit theme”: “Theme settings”=> “Custom CSS”:

:root {
  --color-background: var(--color-base-background);
  --color-foreground: var(--color-base-text);
}