How can I keep the language switcher visible on mobile view?

[Tyago]

Hi everyone!

I’m new here and in general on making websites. I’m making a shop with the prestige theme and tried to integrate the Language switcher from Translation Lab next to search icon. For the Desktop-view it functions perfectly, but for the mobile version the menu collapses, and the secondary navigation as well, so the Switcher disapears with it. I made a workaround and placed it in the sidebar menu, but I now am looking if somebody can help me keeping the Switcher from the desktop view on the mobile view as well. I don’t know where to change the code and which liquidcodes I should use.

This is the Language switcher that I wish to implement on the mobile view as well that at the moment looks like this:

And here is the workaround, but it is not optimal, as it isn’t visible without opening the sidemenu:

I have the following code in the header.liquid:

{%- comment -%}

CURRENCY AND LANGUAGE SELECTORS

{%- endcomment -%}

{%- if section.settings.show_country_selector and localization.available_countries.size > 1 -%}
{%- assign country_selector = true -%}
{%- endif -%}

{%- if section.settings.show_locale_selector and localization.available_languages.size > 1 -%}
{%- assign locale_selector = true -%}
{%- endif -%}

{%- if locale_selector or country_selector -%}
{%- capture localization_form -%}
{%- form ‘localization’, id: ‘localization_form_header’, class: ‘Header__LocalizationForm hidden-pocket hidden-lap’ -%}

{%- if country_selector -%}

{{ 'header.general.country' | t }} {{- localization.country.name }} ({{ localization.country.currency.iso_code }} {% if localization.country.currency.symbol %}{{ localization.country.currency.symbol }}{%- endif -%}) {%- render 'icon', icon: 'select-arrow' -%}

{% render 'icon' with 'close' %} {{ 'header.general.country' | t }}

{%- for country in localization.available_countries -%} {{- country.name }} ({{ country.currency.iso_code }} {% if country.currency.symbol %}{{ country.currency.symbol }}{%- endif -%}) {%- endfor -%}

{%- endif -%}

{%- if locale_selector -%}

{{ 'header.general.locale' | t }} {{- localization.language.iso_code | capitalize -}} {%- render 'icon', icon: 'select-arrow' -%}

{% render 'icon' with 'close' %} {{ 'header.general.locale' | t }}

{%- for language in localization.available_languages -%} {{- language.iso_code | capitalize -}} {%- endfor -%}

{%- endif -%}

{%- endform -%} {%- endcapture -%} {%- endif -%}

And here is the part of the secondary navigation:

{%- unless section.settings.show_icons or use_sidebar_menu -%}

{%- if shop.customer_accounts_enabled -%}
• {{- 'header.navigation.account' | t -}}
{%- endif -%}
• {{ 'header.navigation.search' | t }}
• {{ 'header.navigation.cart' | t }} ({{ cart.item_count }})

{%- elsif localization_form != blank -%}

• {{ localization_form }}

{%- endunless -%}

{%- if shop.customer_accounts_enabled and section.settings.show_icons or use_sidebar_menu -%}

{%- render ‘icon’ with ‘account’ -%}

{%- endif -%}

{%- render 'icon' with 'search' -%} {%- render 'icon' with 'search-desktop' -%}

<a href=“{{ routes.cart_url }}” class=“Header__Icon Icon-Wrapper Icon-Wrapper–clickable {% unless section.settings.show_icons or use_sidebar_menu %}hidden-desk{% endunless %}” {% if settings.cart_type == ‘drawer’ %}data-action=“open-drawer” data-drawer-id=“sidebar-cart” aria-expanded=“false” aria-label=“{{ ‘header.navigation.open_cart’ | t }}”{% endif %}>
{%- render ‘icon’ with ‘cart’ -%}
{%- render ‘icon’ with ‘cart-desktop’ -%}

Is there a easy way to display the Switcher on the mobile view as well? And would it have enough space between the search icon and the Logo?

Greetings
Tiago

[oscprofessional]

@Tyago ,

Share your store URL.

[LitExtension]

Hi @Tyago ,

Please send your site and if your site is password protected, please send me the password. I will check it.

[Tyago]

Hi @oscprofessional
Hi @LitExtension

The URL is: themesmereyes.com and the password is rtaime. Thank you a lot in advance.

[LitExtension]

Hi @Tyago ,

Go to Assets > theme.css and paste this at the bottom of the file:

@media screen and (max-width: 1007px){
	.Header__SecondaryNav .hidden-pocket {
		display: block !important;
	}
	.Header__SecondaryNav .SelectButton{
		padding-right: 10px !important;
		margin-right: 10px !important;
	}
	.Header__Icon + .Header__Icon{
		margin-left: 10px !important;
	}
}

Hope it helps!

[oscprofessional]

@Tyago ,

@media screen and (max-width: 1140px){
.Header__SecondaryNav .hidden-pocket {display: block !important;}
svg.Icon.Icon--search {right: -9px;}
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

[Tyago]

@LitExtension
@oscprofessional

Thank you very very much, both solutions worked perfectly to show the button on mobile.

Now the Switcher is showing but is faded, so I can click on it, but it disapears, so it isn’t active and when I press it it doesn’t change the language, it only closes it again. To really switch the language I now have to press the Search icon and then click the language button and only then I am able to choose the language. (The search button triggers something, that activates the popup for the menus)

Maybe you have a simple solution for this as well? But thank you a lot again, it is just awsome to make steps in the right direction

I’m now just trying to find the problem, but I don’t think that I am able to find it xD

[PetUtopia]

Hello, is this still valid? Because it seems like I cannot find theme.css

[Thevelora]

in dawn theme can you tell me what can I do pleass