How to move languge selector bar from footer to the header or menu in mobile version

[samsam2]

dear

i am using dawn theme, and recently i added Arabic language to my website and i would like to move the language selector bar from footer to the header or menu in mobile version.

[KetanKumar]

@samsam2

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[samsam2]

Dear Ketan

thank you for your reply

here is the URL: https://mia-concept.com/

i would like to know how to get the language bar selector from footer to header in desktop and mobile version ,

[ExpertRookie]

Hi @samsam2 ,

Please try to put this code to any place on the header

{%- form 'localization', id: 'HeaderLanguageForm', class: 'localization-form' -%}
  
    
  

{%- endform -%}

Try it and let me know

[samsam2]

thank you it works but

• on mobile i can see the language bar only when its English, when i choose Arabic the bar disappear and i cant take back to English

• is it possible to make the bar smaller or any other modification to make it more beautiful

here is the preview link : https://h9glfdmcfbmuogm6-62968234183.shopifypreview.com

best regards

[ExpertRookie]

Hi @samsam2
I think you added the code into the preview link.
when you change the language, the url will change and link to the store with published theme.

[ExpertRookie]

Hi @samsam2 ,

Please use this code to make your select better (remove the old code and replace by this)

{%- form 'localization', id: 'HeaderLanguageForm', class: 'localization-form' -%}
    
{%- endform -%}

• on mobile i can see the language bar only when its English, when i choose Arabic the bar disappear and i cant take back to English: It disappears because you submitted on the preview mode, after the submission you are no longer on the preview mode. I think you should to test it on live view

[ExpertRookie]

@samsam2

Please replace this code

{%- form 'localization', id: 'HeaderLanguageForm', class: 'localization-form' -%}

by

{%- form 'localization', id: 'HeaderLanguageForm', class: '' -%}

to make your select box look better

[samsam2]

i published on the main website and works great ,

one last thing

is it possible to move it to the right or header or to the menu in mobile version at least ?

[ExpertRookie]

@samsam2

Add this code to bass.css file

#HeaderLanguageForm {
    display: none;
    text-align: right;
  }

@media screen and (max-width: 990px) {
  #HeaderLanguageForm {
    display: block;
  }
}

[samsam2]

thank you alot for your efforts ,

it works perfect on mobile but not exist on desktop ( desktop not important at the moment 95% of my visitors are on mobile browser)

thank you again

[ExpertRookie]

@samsam2

You are welcome

[loolakoola]

Hi, ExpertRookie, I’m using Dawn so I followed your advice.

So I can see selector on top but i I found t dosen’t work actually for me.

When I select other languages, the store’s language setting is not change.

How can I deal with it? Thank you.

[KetanKumar]

@loolakoola

oh sorry for that issue can you please share your store url so i will check and let you know

[Coffeesection]

Hello, please help me to move language selector bar to the top right corner (Translate & Adapt)

Debut theme

Also how to set Bulgarian language for Bulgarian market customers?

The default is English in Bulgaria market and can’t be changed?

Thanks for your help

[Coffeesection]

https://coffeesection.com/

Also how to set Bulgarian language for Bulgarian market customers?

The default is English in Bulgaria market and can’t be changed?

Thanks for your help