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.
