Moving language selector from footer to the header section

[Sam77]

I’m using Dawn 15.4.1 version. I need to move the language selector from the footer section to the header section. Thought I tried hard, it only appears on wide screen view, but not appearing on mobile and desktop view which are crucial to me. Can someone help me as to how to get the language selector placed in the header section on mobile and desktop view - dawn theme. Thanks

[Sam77]

Yes, with my limited knowledge on coding, I’m afraid to do much of editing on the code without a help. here is a copy of that code section;

  <div class="desktop-localization-wrapper">

    {%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}

      <localization-form class="small-hide medium-hide" data-prevent-hide>

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

          <div>

            <h2 class="visually-hidden" id="HeaderCountryLabel">{{ 'localization.country_label' | t }}</h2>

            {%- render 'country-localization', localPosition: 'HeaderCountry' -%}

          </div>

        {%- endform -%}

      </localization-form>

    {% endif %}



    {%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}

      <localization-form class="small-hide medium-hide" data-prevent-hide>

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

          <div>

            <h2 class="visually-hidden" id="HeaderLanguageLabel">{{ 'localization.language_label' | t }}</h2>

            {%- render 'language-localization', localPosition: 'HeaderLanguage' -%}

          </div>

        {%- endform -%}

      </localization-form>

    {%- endif -%}

  </div>

kindly note that the I need the language selector to sit right below the search and cart icon on a new horizontal line so that the centered position of the logo is not affected. After adding the language selector to the header, I still need the logo to appear perfectly centered.

Many thanks in advance

[Moeed]

Hey @Sam77

First of all ignore the AI generated response above as it’s not useful at all.

Secondly, regarding your question Dawn already has an option to display the language selector in the header. Just simply go into your theme editor and follow the screenshot attached below.

Best,
Moeed

[Sam77]

Hi, I already tried the options that you shown with the attached screenshots. With that, the language selector only appears within the header when viewed on wide screen, but as for mobile view and desktop view, the language selector still appears only in the footer section. So, how to get the language selector appeared on mobile view and desktop view ?

[Moeed]

Yes, for mobile view it will show but not in the mobile header. It will show in the menu drawer as you can see below.

If you want to show it in the mobile header (which I don’t recommend you to) then you’ll have to manually render your localization wrapper file in your mobile header so yeah that part will require custom coding.

Best,
Moeed

[tim_1]

Well, technically, it should be possible to show this in-header language selector always visible.
Just add this code to the Header section Custom CSS setting:

.desktop-localization-wrapper localization-form {
  display: block !important;
}

Though it will force the logo off-center:

Care to share a link to your store? (and a preview password if one is set)