Ask your WordPress questions! Pay money and get answers fast! (more info)

WPML Language selector drop down issues WordPress

  • SOLVED

Hi Guys

I have the WPML plugin installed on http://www2.naty.com/

The language selector is in a header right hook box and I have 3 issues:

1. It does not drop down on the home page
2. when it does drop down (on other pages) it is hidden behind the navbar and wrap
3. I neeed to make it a bit wider so the text does not wrap

If you hover over it on this page you can see it working

http://www2.naty.com/about-us/

Any help/guidance would be greatly appreciated

Many thanks
Steve

Answers (4)

2012-12-07

Dbranes answers:

Hi

<blockquote>3. I neeed to make it a bit wider so the text does not wrap
</blockquote>

for this part, you can change

#lang_sel li {float:left;width:149px;position:relative;}

into fx:

#lang_sel li {float:left;width:170px;position:relative;}

in http://www2.naty.com/wp-content/plugins/sitepress-multilingual-cms/res/css/language-selector.css?v=2.6.1


Steve Watson comments:

Thanks Dbranes. Any idea on points 1. and 2. ? :)


Dbranes comments:

It looks like English is the only language in the select box on the front page

but on the "about-us" page you have all the others (english + 8 other languages)

so that the reason why there is no drop down on the frontpage.



Steve Watson comments:

Ah yes. Because i have no other language version of the home page the dropdown box is only showing English! haha. I understand now :)

2012-12-07

Kiet Luong answers:

please try to find this style

#header {
float: none;
font-size: 12px;
height: 100px;
margin: 0 auto;
max-width: 980px;
overflow: hidden;
padding: 0;
}


in http://www2.naty.com/wp-content/themes/dynamik/css/dynamik-min.css?ver=1354883410 file

and remove overflow: hidden;


Kiet Luong comments:

on home page this plugin just shown current language, and did not shown language options.

The code in home page:

<li><a class="lang_sel_sel icl-en" href="#">

<img alt="en" src="http://www2.naty.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/en.png" class="iclflag">
&nbsp;<span class="icl_lang_sel_current">English</span></a> </li>


and here is code in inner pages:


<li><a class="lang_sel_sel icl-en" href="#">

<img alt="en" src="http://www2.naty.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/en.png" class="iclflag">
&nbsp;<span class="icl_lang_sel_current">English</span></a>
<ul>
<li class="icl-nl">
<a href="http://www2.naty.com/wat-is-naty/?lang=nl" hreflang="nl" rel="alternate">

<img alt="nl" src="http://www2.naty.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/nl.png" class="iclflag">&nbsp;
<span class="icl_lang_sel_native">Nederlands</span> <span class="icl_lang_sel_translated"><span class="icl_lang_sel_native">(</span>Dutch<span class="icl_lang_sel_native">)</span></span> </a>
</li>
<li class="icl-fr">
<a href="http://www2.naty.com/qui-sommes-nous/?lang=fr" hreflang="fr" rel="alternate">

<img alt="fr" src="http://www2.naty.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/fr.png" class="iclflag">&nbsp;
<span class="icl_lang_sel_native">Français</span> <span class="icl_lang_sel_translated"><span class="icl_lang_sel_native">(</span>French<span class="icl_lang_sel_native">)</span></span> </a>
</li>
<li class="icl-it">
<a href="http://www2.naty.com/chi-siamo/?lang=it" hreflang="it" rel="alternate">

<img alt="it" src="http://www2.naty.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/it.png" class="iclflag">&nbsp;
<span class="icl_lang_sel_native">Italiano</span> <span class="icl_lang_sel_translated"><span class="icl_lang_sel_native">(</span>Italian<span class="icl_lang_sel_native">)</span></span> </a>
</li>
<li class="icl-ru">
<a href="http://www2.naty.com/%d0%be-%d0%ba%d0%be%d0%bc%d0%bf%d0%b0%d0%bd%d0%b8%d0%b8/?lang=ru" hreflang="ru" rel="alternate">

<img alt="ru" src="http://www2.naty.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/ru.png" class="iclflag">&nbsp;
<span class="icl_lang_sel_native">Русский</span> <span class="icl_lang_sel_translated"><span class="icl_lang_sel_native">(</span>Russian<span class="icl_lang_sel_native">)</span></span> </a>
</li>
<li class="icl-fi">
<a href="http://www2.naty.com/tietoa-natysta/?lang=fi" hreflang="fi" rel="alternate">

<img alt="fi" src="http://www2.naty.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/fi.png" class="iclflag">&nbsp;
<span class="icl_lang_sel_native">Suomi</span> <span class="icl_lang_sel_translated"><span class="icl_lang_sel_native">(</span>Finnish<span class="icl_lang_sel_native">)</span></span> </a>
</li>
<li class="icl-he">
<a href="http://www2.naty.com/%d7%90%d7%95%d7%93%d7%95%d7%aa%d7%99%d7%a0%d7%95/?lang=he" hreflang="he" rel="alternate">

<img alt="he" src="http://www2.naty.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/he.png" class="iclflag">&nbsp;
<span class="icl_lang_sel_native">עברית</span> <span class="icl_lang_sel_translated"><span class="icl_lang_sel_native">(</span>Hebrew<span class="icl_lang_sel_native">)</span></span> </a>
</li>
<li class="icl-ko">
<a href="http://www2.naty.com/about-us-2/?lang=ko" hreflang="ko" rel="alternate">

<img alt="ko" src="http://www2.naty.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/ko.png" class="iclflag">&nbsp;
<span class="icl_lang_sel_native">한국어</span> <span class="icl_lang_sel_translated"><span class="icl_lang_sel_native">(</span>Korean<span class="icl_lang_sel_native">)</span></span> </a>
</li>
<li class="icl-sv">
<a href="http://www2.naty.com/om-oss/?lang=sv" hreflang="sv" rel="alternate">

<img alt="sv" src="http://www2.naty.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/sv.png" class="iclflag">&nbsp;
<span class="icl_lang_sel_native">Svenska</span> <span class="icl_lang_sel_translated"><span class="icl_lang_sel_native">(</span>Swedish<span class="icl_lang_sel_native">)</span></span> </a>
</li>
</ul>

</li>


Kiet Luong comments:

Please try to change the code shown language widget on home page to same with code in innner pages.


Kiet Luong comments:

to shown all language options in inner page please try to find this style:

#header {

float: none;

font-size: 12px;

height: 100px;

margin: 0 auto;

max-width: 980px;

overflow: hidden;

padding: 0;

}


in http://www2.naty.com/wp-content/themes/dynamik/css/dynamik-min.css

then remove overflow: hidden; line


Kiet Luong comments:

sorry for my english


Kiet Luong comments:

if you dont want to remove overflow: hidden;


you can simply add :

#header {
overflow: visible !important;
}


to http://www2.naty.com/wp-content/themes/dynamik/css/dynamik-min.css file


Steve Watson comments:

Thanks Kioluong, very helpful.


Kiet Luong comments:

Yeah, very happy to know that things helpful for you.

2012-12-07

Arnav Joy answers:

Hi Steve ,

You just have to add there two lines to your css and it will be ok

#wrap{overflow:hidden}
#header{overflow:visible !important}


Steve Watson comments:

That's much more simple and to the point, thanks.

2012-12-07

Gabriel Reguly answers:

Hi Steve,

Why not move it to the bottom of the page?

It will solve those issues and seems more natural to me.

Regards,
Gabriel


Steve Watson comments:

Thanks for the advice Gabriel but my client wants it at the top.