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
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 :)
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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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.
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.
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.