Hi, im trying to add a language selector to the header menu for desktop but its position is all messed up. Could anyone help me to place it nicely in alignment with all the menu items and next to the cart and login icons? Thx.
Here’s the code that i used to add it there in header.menu.drop.liquid file
{% form ‘localization’ %}
<!-- Language selector -->
<select name="locale_code" onchange="this.form.submit()">
{% for language in localization.available_languages %}
<option value="{{ language.iso_code }}"
{% if language.iso_code == localization.language.iso_code %}selected{% endif %}>
{{ language.endonym_name }}
</option>
{% endfor %}
</select>
I have checked your website. It seems that you added style snippets to bring the language selector to the desired position on the desktop screen. However, on mobile and tablet devices, you should make the following adjustments to make it look better:
1. Regarding structure: You should not place a div tag inside a ul tag.
2. Regarding styles for mobile: Please remove the display: block; line in .shopify-localization-form on mobile so that its size does not exceed the popup.
Dear @JustinasR
I checked the reason the select width is stretched, and it is because one of the options has a significantly higher character count compared to the others. If we reduce the width, would you accept the text being hidden?
The default box, collapsed should be shorter. Pls have a look at the form in the footer bottom right. Only once you expand it, then it should be longer.
The reason for the difference is that the structures of the two positions are different. In the menu, a select element is being used. However, at the bottom position, a button, ul tag, and input are used to create the selector.
Dear @JustinasR
As I explained in the previous message, the reason is that you are using a select element instead of the default ‘Language’ block structure.
To use the correct block as default, you need to identify the block in the theme editor.
The form style on the footer is the correct one and the one that I’d like to use at the top.
The only thing that is missing right now is the small down-pointing arrow that exists on the footer form, but not on the header form. How do i add the same?
Thanks for the clarification and for sharing the screenshot.
To ensure the header language selector matches the footer style (including the arrow indicator), we may need to review how the selector is implemented in your theme’s header section. If possible, could you please provide your store URL or collaborator access so we can take a closer look at the theme structure?
Let me explain in more detail. The reason the selector you customized above the menu does not look like the default one is because of the structure you used. As you initially described, you used the following code:
<!-- Language selector -->
<select name="locale_code" onchange="this.form.submit()">
{% for language in localization.available_languages %}
<option value="{{ language.iso_code }}"
{% if language.iso_code == localization.language.iso_code %}selected{% endif %}>
{{ language.endonym_name }}
</option>
{% endfor %}
</select>
It will be displayed on the frontend as follows:
<select name="locale_code" onchange="this.form.submit()">
<option value="en" selected="">
English
</option>
<option value="lt">
lietuvių
</option>
<option value="de">
Deutsch
</option>
<option value="es">
Español
</option>
<option value="fr">
français
</option>
<option value="it">
Italiano
</option>
<option value="pt-PT">
português (Portugal)
</option>
</select>
When you compare it with the code of the default selector, you will see the difference.
Next is the solution: the safest solution is to use the block containing the language selector and add it to your desired position. That way, you will have the exact same structure. In case you still have difficulties, please share collaborator access with me. I will be able to help you fix it.
