Adding language selector to hamburger menu mobile

Topic summary

A user seeks help adding a language selector to their mobile hamburger menu, specifically positioning it below climate-related text on their Shopify store (nexwatches.no).

Proposed Solution:

  • BSS-Commerce suggests an alternative approach since adding the selector directly to the menu isn’t currently possible due to existing event definitions
  • Instead, they recommend displaying the language selector separately on mobile

Implementation:
Add the following CSS code to the end of the theme.css file:

@media screen and (max-width: 1007px) {
  .FlexItem__Header.FlexItem__Header>form#localization_form_header {
    display: block !important;
  }
}

This CSS targets screens under 1007px width and forces the localization form to display as a block element. The discussion appears to offer a working workaround, though it differs from the original placement request.

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

Hello!

Can anyone please help me to add the language selector in the hamburger menu for the mobile version under the climate text?

Website:

Https://nexwatches.no/

Thank you!

Hi @Rubberduck

Currently it is not possible to add the language section to the menu because the event for this tag has been defined. Instead, on mobile, you should let it appear as follows:

by adding CSS at the end of the theme.css file:

@media screen and (max-width: 1007px) {
   .Header__FlexItem.Header__FlexItem--fill>form#localization_form_header {
    display: block !important;
}
  
}

We hope that this can help you.