Removing country/selector from mobile drawer menu

Store Design

Topic summary

A user seeks to remove the country/region selector from their mobile drawer menu while keeping it hidden on desktop. They’re using a third-party currency app and want to avoid confusion.

Attempted Solutions:

  • The user tried CSS code from a previous post targeting .menu-drawer__localization-header.header-localization with display: none at max-width 989px
  • This only hides the selector in the theme editor, not on the live site

Proposed Fix:
Another user suggests adding CSS targeting #HeaderCountryMobileForm form.localization-form with display: none for screens under 989px width.

Implementation:
The code should be added to the theme.liquid file (accessible via Online Store > Themes > Edit code) after the <head> tag.

Status: The discussion remains open with no confirmation whether the proposed solution resolved the issue.

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

www.amazingmaps.shop

Hello, the theme customisation removes only the country/region selector on desktop but not mobile.

I would like to remove the one in the drawer menu on the mobile version of my website as I’m using a third party app for currency and it makes it confusing.

I added this code from a previous post but it only hides it in the editor and not in the actual site even after saving:

@media only screen and (max-width:989px){ .menu-drawer__localization.header-localization { display: none; } }

IMG_88E7320642AF-1.jpeg
IMG_88E7320642AF-1.jpeg1170×1261 46.6 KB

2

Hey @amazingmaps ,

Maybe you can try this

@media only screen and (max-width:989px) { 
    form#HeaderCountryMobileForm.localization-form { 
        display: none;
    }
}
3

Please add this code to your theme.liquid file, after in Online Store > Themes > Edit code
3 Likes