flag out of hamburger menu

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

Problem:
The client's website is in French/Chinese, and Chinese mobile users leave the homepage because they cannot see the Chinese flag and the site does not automatically redirect to the browser language.

Solution:
1. Ensure that the automatic redirection based on browser language is enabled. This feature should work on all devices, including mobile browsers. You can enable and read more about this feature here: Automatic Redirect Based on Browser Language.

2. To add language flags outside the hamburger menu in Divi theme, custom CSS and JavaScript are required. Here are the steps:

- Add the following CSS in your WordPress Dashboard under Divi > Theme Options > General > Custom CSS:

@media only screen and (max-width: 981px) {<br />    li.wpml-ls-first-item {<br />        position: absolute !important;<br />        top: 30px !important;<br />        left: 70% !important;<br />        z-index: 999999 !important;<br />        list-style-type: none !important;<br />    }<br />    li.wpml-ls-last-item {<br />        position: absolute !important;<br />        top: 30px !important;<br />        left: 80% !important;<br />        z-index: 9999999 !important;<br />        list-style-type: none !important;<br />    }<br /><br />div#top-header {<br />    display: none;<br />}<br />}

- Add the following JavaScript in Divi > Theme Options > Integration > Add code to the of your blog:

<script>(function($) {<br />$(document).ready(function() {<br />    if ($(window).width() < 980) {<br />        $('li.wpml-ls-first-item, li.wpml-ls-last-item').insertAfter('#logo');<br />    }<br />});<br />})(jQuery);</script>

If these solutions do not apply or are outdated, we recommend checking related known issues at WPML Known Issues, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If further assistance is needed, please 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: Not WPML issue

This topic contains 6 replies, has 3 voices.

Last updated by Mihai Apetrei 2 years ago.

Assisted by: Mihai Apetrei.

Author	Posts
April 18, 2023 at 2:34 pm #13496941
petrid	Hello, My website is in French/Chinese and most of my Chinese mobile users leave the website as soon as they reach the homepage because they can't read French and don't see the Chinese flag. 1) Are you sure to automatic redirection to browser language works on mobile browsers as well ? 2) How can I add the Flags next to the hamburger menu ? I am working with DIVI. I have seen you custom flags settings but could not find my answers there. https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/ Thank you in advance for your help
April 18, 2023 at 3:29 pm #13497367
Andreas	Hi, before your ticket is assigned to one of my colleagues, please allow me to walk you through some initial debugging steps. This will help speed up the support process. About question 1 ) I am not sure I understand your question. From your debug info I can see that you are not using browser redirection. You can read more here : https://wpml.org/documentation/getting-started-guide/language-setup/automatic-redirect-based-on-browser-language/ Have in mind that the above has many details, especially with Google indexing (you can read details in our documentation) so read it carefully. About question 2) As I understand you wish to put the language swither ( flags ) outside the hamburger menu in mobile. Your theme after a certain view port ( lower screen ) is switching from the normal menu to hamburger menu and adding the same elements from the normal menu to the hambruger. If you wish to disable the language switcher in the hamburger menu and display them outside it you need custom code, because you need to override the behavior of your theme (Divi ) I had a similar question recently for Divi, you can read more here. https://wpml.org/forums/topic/showing-flag-in-mobile-menu-not-in-hamburger-divi-theme/ I hope this helps. Please let us know how it goes or if you need any further assistance. 🙂 Regards, Andreas
April 18, 2023 at 3:36 pm #13497489
Mihai Apetrei WPML Supporter since 03/2018 Languages: English (English ) Timezone: Europe/Bucharest (GMT+03:00)	Hi there. 1. That redirect should take place on every browser no matter the device that's used. What is important is that the language set in the browser settings would be corresponding to the language of the user. That's not something that we have control over, unfortunately. But please take into consideration that the feature needs to be enabled first - from what my colleague is mentioning above, it seems that the feature might not be enabled. Please make sure that it is enabled. 2. For adding the language switcher outside of the hamburger menu, you can also check these two existing tickets where the clients were also using Divi and asked for the same thing: - https://wpml.org/fr/forums/topic/i-would-like-to-put-the-wpml-flag-close-to-the-hamburger-menu-not-inside/ (you might want to translate the response of my colleague with Google Translate) - https://wpml.org/forums/topic/showing-flag-in-mobile-menu-not-in-hamburger-divi-theme/ Have a lovely rest of the day. Mihai Apetrei
April 19, 2023 at 8:33 am #13502867
petrid	Thank you for both your answers guys, by bad, I forgot to activate the redirection. I will try to modify the DIVI header and add either the selector or just an image of a flag with a link on the Chinese version of the website, then go to visibility and activate visibility for mobile only. But, after reading your support post about the switcher : not sure to understand where to find the shortcode ... just in case adding the widget doesn't work
April 20, 2023 at 7:22 am #13509041
Mihai Apetrei WPML Supporter since 03/2018 Languages: English (English ) Timezone: Europe/Bucharest (GMT+03:00)	Hi there. This is the shortcode: [wpml_language_selector_widget] My colleague also shared the ticket above so that you can see where he also recommended that: https://wpml.org/forums/topic/showing-flag-in-mobile-menu-not-in-hamburger-divi-theme/#post-12622077 Have a lovely rest of the day! Mihai
April 21, 2023 at 1:03 pm #13518053
petrid	Hello, I am getting back to you to tell you that DIVI helped me with a great solution, instead of recreating a header from scratch with the same design as my theme (which can be tricky for some) they gave me some code to add in the CSS and HTML header. Here are the instructions : First, add this custom CSS code in your WordPress Dashboard > Divi > Theme Options > General > Custom CSS: @media only screen and (max-width: 981px) { li.wpml-ls-first-item { position: absolute !important; top: 30px !important; left: 70% !important; z-index: 999999 !important; list-style-type: none !important; } li.wpml-ls-last-item { position: absolute !important; top: 30px !important; left: 80% !important; z-index: 9999999 !important; list-style-type: none !important; } div#top-header { display: none; } } Then go to your WordPress Dashboard > Divi > Theme Options > Integration > Add code to the < head > of your blog and add the following: <script> (function($) { $(document).ready(function() { if ($(window).width() < 980) { $('li.wpml-ls-first-item, li.wpml-ls-last-item').insertAfter('#logo'); } }); })(jQuery); </script> Hope this helps CHEERS
April 21, 2023 at 10:49 pm #13520085
Mihai Apetrei WPML Supporter since 03/2018 Languages: English (English ) Timezone: Europe/Bucharest (GMT+03:00)	Hi there. I am very happy to hear that. Thank you for sharing this with us and with the community so that others can also find it and use it. I am marking this ticket as resolved for now then. Good luck with the project! Mihai