How to remove the gray background from the header on mobile

Store Design
, , , , , , , , , ,

Topic summary

A user needed to remove the gray background appearing under the login and currency selector in their mobile header.

Solution provided:

  • Navigate to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS
  • Add CSS targeting the menu drawer utility links on mobile devices (max-width: 768px)
  • Set background to white with !important flag to override existing styles

Status: Resolved - the CSS solution successfully removed the gray background as confirmed by the original poster.

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

Hey guys, I want to remove the gray background under the login and currency selector on mobile.

CreatorTim_0-1736976841461.png
CreatorTim_0-1736976841461.png378×844 11.9 KB

How can I do that?

Here’s my store, so you can check it out: https://1049xn-ya.myshopify.com/

Thanks a lot,
Tim

2

Hi @CreatorTim

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
details#Details-menu-drawer-container.menu-drawer-container.menu-opening .menu-drawer__utility-links {
    background: white !important;
}
}

Here is the result:

image_720.png
image_720.png331×720 7.58 KB

I hope this helps

Best,

Daisy

1 Like
3

Thank you! WORKS