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

Hi,
I would like to create a ‘only flag’ wpml language switcher into Mobile menu bar. But I didn’t find the way to avoid language text (like italian…english..) by the flag.
My steps:
1)I start managing my mobile header, adding the wpml language module in the right part of Main header position (please have a look to screenshot 1 – red arrow).
2) then I tried to configure that module for aspect ratio. What I did aspect was to have the way to show only flags (no language name text), because on mobile the space is really narrow. But I didn’t find this option (next screenshot n. 2). But of course it is not possible to put flag+language name in that position. In fact it’s cut off by page margin (screenshot n.3)
3) I tried to find a solution in the WPML settings, but WPML offer the options of change language switcher aspect ratio (.e. only flag, language names, text color and so on) only for Switcher that appear in menu.
4) last chance, i create a menu to contain only a language switcher to put it in the mobile header. In this way I was able to decide to have a ‘only flag switcher’. But it doesn’t work, because the menu shows blank (empty) if I don’t create at least one more menu voice + the language selector. So this trial failed.
It seems that the only way is to work by code to avoid (display:none) the text near the flag. But I’m not ablate do that. Honestly it seen odd that there’re no option to set a only flag on mobile. Probably I didn’t find the the right way to get the goal.

Could you please help me with that. Many thanks.

PS
I’m using the test WPML version, plugin recomended by woodmart

Attachments:

You must be logged in to view attached files.

Hello,

Please check this manual: https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/ Please scroll to this part: https://gyazo.com/1d7d50471f4eab87375de96a58fd6306

If you still have a question, please get in touch with WPML support.

If you have any questions please feel free to contact us.

Best Regards

Hi,
any of the information you suggest to check can help.
Could you please clarify why you send me the screenshot of Footer Language selector?
Thanks

Hello,

This is WPML manual, it shows how to create and configure a language switcher, the manual provides instructions for taking a footer menu as an example, you can take any menu and follow the instructions, and you will see the same instructions.

WoodMart theme is 100% compatible with the WPML plugin, at the same time we do not provide support for this plugin, this plugin provide support, please contact and they will provide comprehensive instructions, taking into consideration your individual requirements.

If you have any questions please feel free to contact us.

Best Regards

Thanks for fast reply,
I asked support to WPML They’ll reply.
Probably you miss a part of my explanation. I excuse for its length but it includes some important details.
The WPML language Switcher in that position is not a menu..
So, that is not that part of the content of the documentation to take help from. I just say that to clarify that is not a good reference for other people that ask the same.
About possibile solution as I already wrote ( for other people looking for support):
-create a menu and place it as an object into the mobile header: it’s not a solution because to appear the menu needs almost one ‘real menu voice’ a part from the menu switcher.
– place a Custom Switcher using [wpml_language_selector_widget] adding to the header a text/html object, doesn’t show the switcher. Don’t ask me why, I’m just reporting
I’m wondering if it is good to have a language switcher with text there (there=the natural position in a usability prospective) and why there’s no way to eliminate text in easy way, if there’s 100% compatibility.
As soon I will find a solution, I will post here the wpml reply.
Regards

PS
Please, let me say that in any case, since it’s a reasonable (basic) request to have the language switcher there (it’s not a theme customisation), and it’s a usability need to exclude language text, I suggest to try the steps to get it and get the goal. Probably for me is a matter of much time, but for you (that create the theme and made it wpml compatible) a very fast job.
Thanks again

Hello,

Please insert the site admin access into the Private content below the message area. We will take a closer look at the case.

What menu are you trying to assign the switcher, we will check.

If you have any questions please feel free to contact us.

Best Regards

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.

Hello,

We are glad you have solved the issue.

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts