language on mobile is not showing correct

This thread is resolved. Here is a description of the problem and solution.

Problem:
You are trying to adjust the language display on your website for mobile devices and want to change how the language options appear, specifically not in a dropdown menu.
Solution:
Take kindly note, that this is custom work and our supporters are not obligated to provide solutions in such cases. We have set the menu language switcher to not display as a dropdown on mobile devices by using CSS media queries.
1. We added the following CSS:

@media screen and (max-width: 980px) {
  #menu-item-wpml-ls-4-sv {
    display: none;
  }
   .wpml-language-switcher {
        display: inline-block;
        position: relative;
        bottom: 6px;
        right: 6px;
    }
}
@media (min-width: 981px) {
    .wpml-language-switcher {
        display: none;
    }
}}}

You can save this CSS at WPML > Languages > Language Switcher Options > Additional CSS.
2. To display a custom language switcher instead, you can integrate it via PHP or Shortcode. Enable and customize it at WPML > Languages > Custom Language Switcher. For guidance, refer to the following documentation:

Additionally, we have implemented a custom hook using the WP Code Plugin to display the WPML Custom Language Switcher in Divi's Top Header:

function custom_content_before_menu() {
    echo '<div class="wpml-language-switcher">';
        do_action('wpml_add_language_selector');
    echo '</div>'; 
}
add_action('et_header_top', 'custom_content_before_menu');

If this solution does not resolve your issue or seems outdated, please check related known issues at https://wpml.org/known-issues/, verify the version of the permanent fix, and confirm that you have installed the latest versions of themes and plugins. If needed, do not hesitate to open a new support ticket at WPML support forum.

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Tagged: Custom Work

This topic contains 2 replies, has 0 voices.

Last updated by Andreas W. 1 week, 5 days ago.

Assisted by: Andreas W..

Author	Posts
January 4, 2025 at 6:47 pm #16563769
hasanH-6	Background of the issue: I am trying to adjust the language display on my website hidden link. I want to change how the language options appear on mobile devices. Symptoms: The language on mobile is not showing correctly, and I don't want it to be in a dropdown menu. Questions:
January 4, 2025 at 8:11 pm #16563802
Andreas W. Supporter Languages: English (English ) Spanish (Español ) German (Deutsch ) Timezone: America/Lima (GMT-05:00)	Hello, Take kindly note that the behavior on your site is expected and any further customziations are custom work that is not covered by our support policy. https://wpml.org/purchase/support-policy/ I would like to guide you on this matter, but if you do not have any developer experience you usually might need to consider reaching out to a contractor. It looks like you have enabled the menu language switcher as dropdown. This means, on most themes, this menu language switcher will appear inside the hamburger menu on mobile and it will use the same layout. You can use a CSS media query and set display to none for this element on mobile screens. @media screen and (max-width: 480px) { #menu-item-wpml-ls-4-sv { display: none; } } This will hide the menu item holding the language switcher on screens with a width of 480px or less. You can save this CSS at WPML > Languages > Language Switcher Options > Additional CSS. Now, you can create a Custom Language Switcher and use another specific media query remove this one on desktop screens. Custom Language Switchers can be integrated by PHP or by Shortcode. You will find an option to enable and customize the Custom Language Switcher at WPML > Languages > Custom Language Switcher. PHP Guide: https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/custom-language-switcher/ Shortcode: https://wpml.org/documentation/support/wpml-coding-api/shortcodes/#wpml_language_switcher If you need further assistance with this implementation I can make and exception and assist you, but please take note that our supporters ar enot obligated to get pro-active on custom code requests. Best regards Andreas
January 5, 2025 at 12:31 pm #16564393
hasanH-6	I truly appreciate that you're making an exception to assist me with this, as I don't have much knowledge in coding. I understand this is an exception. Thank you so much for your understanding! How can I send u login details to WordPress?
January 7, 2025 at 12:51 pm #16569522
Andreas W. Supporter Languages: English (English ) Spanish (Español ) German (Deutsch ) Timezone: America/Lima (GMT-05:00)	Hi, I would like to request temporary access (wp-admin and FTP) to the site to investigate the issue further. The required fields are below the comment section when you log in to leave the next reply. The information you provide is private, meaning only you and I can see and access it. IMPORTANT Please be sure to back up the site and database before granting us access. If you can't see the "wp-admin / FTP" fields, your post and site login details will be set to "PUBLIC". DO NOT publish the data unless you see the required wp-admin / FTP fields. The private reply form looks like this: hidden link The next time you reply, click on "I still need assistance". Video: hidden link Please note that we are obliged to request this information individually on each ticket. We are not allowed to access any credentials that were not specifically submitted on this ticket in the private response form. Best regards Andreas
January 8, 2025 at 3:58 pm #16574315
Andreas W. Supporter Languages: English (English ) Spanish (Español ) German (Deutsch ) Timezone: America/Lima (GMT-05:00)	Please revise your site now. I have added the following CSS at WPML > Languages > Language Switcher Options > Additional CSS: @media screen and (max-width: 980px) { #menu-item-wpml-ls-4-sv { display: none; } .wpml-language-switcher { display: inline-block; position: relative; bottom: 6px; right: 6px; } } @media (min-width: 981px) { .wpml-language-switcher { display: none; } } Further, I have installed the WP Code Plugin and created the following hook to display the WPML Custom Language Switcher in Divi's Top Header. function custom_content_before_menu() { echo '<div class="wpml-language-switcher">'; //PHP action to display the language switcher (see https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#using-php-actions) do_action('wpml_add_language_selector'); echo '</div>'; } add_action('et_header_top', 'custom_content_before_menu');