Reply To: Add a ‘only flag’ wpml language switcher to Mobile menu bar

Hi,
with the help of WPML staff and a lot of personal CSS add (in customise theme section) I finally got the drop down language selector in mobile top-right position.
Just a fast reply of how I got it.

1) wpml->languages->customise language selector (at the bottom of the page)->activate it
2) customise it with the button Customise -> Dropdown Link, check only Flag (25px) and Current Language
3) In header generator-> Mobile header -> add a html/text module and add this code: “<div class=”langsel”>[wpml_language_switcher][/wpml_language_switcher]</div> where .langsel is a css class that I paste in custom CSS of the site (look at the end of this post)
4) Now the language selector appears but to view it in the right way (look at attached file) I add a lot of CSS lines to correct some issues (too small flags, margins, padding, selector cut off/out of margins)
5) This is the code I paste in customise theme CSS:

.langsel{
max-width:60px !important;
margin-left: auto;
margin-right: 0;
margin-top:-8px;}

.wpml-ls-item-legacy-dropdown-click{
background-color:#ffffff !important;}

.wpml-ls-legacy-dropdown-click a {border: 0px solid #cdcdcd;
background-color: #fff !important;
   padding: 5px 0px;
margin-left:20px;}

.rtl .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle {
padding-right: 10px;}

.wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle:after {
content: “”;border: 4px solid transparent;
border-top: 4px solid;
right: 1px;}

.rtl .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle:after {
right: auto; left:10px}

.wpml-ls-legacy-dropdown-click .wpml-ls-current-language:hover>a,.wpml-ls-legacy-dropdown-click a:focus,.wpml-ls-legacy-dropdown-click a:hover {
color: #000;
background: #fff;}

.wpml-ls-legacy-dropdown-click a {border: 0px solid #fff000 !important;padding: 5px 0px;}

.wpml-ls-sub-menu{
border: 0px solid #fff000 !important;
padding: 5px 0px;}

.js-wpml-ls-item-toggle {
padding: 0px 0px 0px 0px !important;}

.rtl .wpml-ls-legacy-dropdown-click .wpml-ls-flag+span {
margin-left: 0; margin-right: .4em}

For sure I’m not a css specialist, so probably there’s a more elegant way to write this code, but I get the result to place and fix the wpml language selector that in my opinion and in my direct experience is distant to be 100% compatible with Woodmart in that position (lang selector natural position on mobile). In the other positions it’s easy to use and place.

Thanks and regards.

Attachments:

You must be logged in to view attached files.