Remove in Mobile Menu Country selector

Store Design

Topic summary

A user wants to remove the country selector from their mobile menu drawer while keeping the language selector. Their current CSS code hides both elements.

Solutions Proposed:

Multiple developers offered different CSS approaches:

  • Target country selector specifically: Add CSS to theme.liquid before </body> tag targeting .menu-drawer__localization .country-selector with display: none for screens under 767px

  • Use nth-child selector: Add CSS to theme.css or base.css targeting localization-form:nth-child(1) for screens under 768px

  • Apply media query to existing code: Wrap the original CSS in a media query @media (max-width: 749px) and add to Custom CSS in theme settings

Status: The discussion remains open with no confirmed solution. Several developers requested the store URL to provide more specific assistance, but the original poster has not responded or indicated which solution worked.

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

Hello

I would like to remove the Country selector from my drawer menu in mobile view - however i would like to keep the language selector

When i use this code - it removes everything

.menu-drawer__localization.header-localization {
display: none !important;
}

TBS2023_0-1735276105944.png
TBS2023_0-1735276105944.png384×812 17.2 KB

2

Hi @TBS2023

Can you send me the store link to check further?

Thank you

3

Can you share the preview URL of your draft theme so that I can help you out?

4

Hello @TBS2023

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px) { .menu-drawer__localization .country-selector { display: none !important; } }

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

5

Hi @TBS2023 , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

6

Hello @TBS2023

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(max-width:768px){
localization-form:nth-child(1) {
    display: none !important;
}
}

Result:

websensepro_0-1735285544255.png
websensepro_0-1735285544255.png474×504 18.4 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

1 Like
7

Hi @TBS2023

Please use this code in Custom CSS in Online Store > Themes > Customize > Theme settings

@media (max-width: 749px) {
    .menu-drawer__localization.header-localization {
        display: none !important;
    }
}