Chris

Issue with nice dropdown solved after changing theme’s header z-index from 100 to 1. Dropping the code below in case it could be useful for someone.

#site-header {
position: relative;
width: 100%;
background-color: #fff;
border-bottom: 1px solid #f1f1f1;
z-index: 1;
}`

I can’t figure it out so i switched to the Nice Dropdown and added the shortcode on top bar. Seems to be working fine on desktop using absolute on position (so it won’t drag the menu down) but on mobile version, the languages are hidden behind logo.

This is the code

<!– GTranslate: https://gtranslate.io/ –>
<span>Ελληνικ?</span><span style=”color:#666;font-size:8px;font-weight:bold;”>▼</span>
<div id=”gt_fade” class=”gt_black_overlay”></div>
<div id=”gt_lightbox” class=”gt_white_content notranslate”>
<div style=”position:relative;height:14px;”><span onclick=”closeGTPopup()” style=”position:absolute;right:2px;top:2px;font-weight:bold;font-size:12px;cursor:pointer;color:#444;font-family:cursive;”>X</span></div>
<div class=”gt_languages”>
<span>Ελληνικ?</span> <span>English</span> <span>Fran?ais</span> <span>Deutsch</span> <span>Русский</span></div>
</div>
<style>
.gt_black_overlay {display:none;position:fixed;top:0%;left:0%;width:100%;height:100%;background-color:black;z-index:2017;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);}
.gt_white_content {display:none;position:fixed;top:50%;left:50%;width:341px;height:180px;margin:-90px 0 0 -170.5px;padding:6px 16px;border-radius:5px;background-color:white;color:black;z-index:19881205;overflow:auto;text-align:left;}
.gt_white_content a {display:block;padding:5px 0;border-bottom:1px solid #e7e7e7;white-space:nowrap;}
.gt_white_content a:last-of-type {border-bottom:none;}
.gt_white_content a.selected {background-color:#ffc;}
.gt_white_content .gt_languages {column-count:1;column-gap:10px;}
.gt_white_content::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);border-radius:5px;background-color:#F5F5F5;}
.gt_white_content::-webkit-scrollbar {width:5px;}
.gt_white_content::-webkit-scrollbar-thumb {border-radius:5px;-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.3);background-color:#888;}
</style>

<script>
function openGTPopup(a) {jQuery(‘.gt_white_content a img’).each(function() {if(!jQuery(this)[0].hasAttribute(‘src’))jQuery(this).attr(‘src’, jQuery(this).attr(‘data-gt-lazy-src’))});if(a === undefined){document.getElementById(‘gt_lightbox’).style.display=’block’;document.getElementById(‘gt_fade’).style.display=’block’;}else{jQuery(a).parent().find(‘#gt_lightbox’).css(‘display’, ‘block’);jQuery(a).parent().find(‘#gt_fade’).css(‘display’, ‘block’);}}
function closeGTPopup() {jQuery(‘.gt_white_content’).css(‘display’, ‘none’);jQuery(‘.gt_black_overlay’).css(‘display’, ‘none’);}
function changeGTLanguage(pair, a) {doGTranslate(pair);jQuery(‘a.switcher-popup’).html(jQuery(a).html()+'<span style=”color:#666;font-size:8px;font-weight:bold;”>▼</span>’);closeGTPopup();}
(function gt_jquery_ready() {
if(!window.jQuery||!jQuery.fn.click) return setTimeout(gt_jquery_ready, 20);
jQuery(‘.gt_black_overlay’).click(function(e) {if(jQuery(‘.gt_white_content’).is(‘:visible’)) {closeGTPopup()}});
})();
</script>
<style>#goog-gt-tt{display:none!important;}.goog-te-banner-frame{display:none!important;}.goog-te-menu-value:hover{text-decoration:none!important;}.goog-text-highlight{background-color:transparent!important;box-shadow:none!important;}body{top:0!important;}#google_translate_element2{display:none!important;}</style>
<div id=”google_translate_element2″></div>
<script>function googleTranslateElementInit2() {new google.translate.TranslateElement({pageLanguage: ‘el’,autoDisplay: false}, ‘google_translate_element2’);}if(!window.gt_translate_script){window.gt_translate_script=document.createElement(‘script’);gt_translate_script.src=’https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit2&#8242;;document.body.appendChild(gt_translate_script);}</script>

<script>
function GTranslateGetCurrentLang() {var keyValue = document[‘cookie’].match(‘(^|;) ?googtrans=([^;]*)(;|$)’);return keyValue ? keyValue[2].split(‘/’)[2] : null;}
function GTranslateFireEvent(element,event){try{if(document.createEventObject){var evt=document.createEventObject();element.fireEvent(‘on’+event,evt)}else{var evt=document.createEvent(‘HTMLEvents’);evt.initEvent(event,true,true);element.dispatchEvent(evt)}}catch(e){}}
function doGTranslate(lang_pair){if(lang_pair.value)lang_pair=lang_pair.value;if(lang_pair==”)return;var lang=lang_pair.split(‘|’)[1];if(GTranslateGetCurrentLang() == null && lang == lang_pair.split(‘|’)[0])return;if(typeof ga==’function’){ga(‘send’, ‘event’, ‘GTranslate’, lang, location.hostname+location.pathname+location.search);}var teCombo;var sel=document.getElementsByTagName(‘select’);for(var i=0;i<sel.length;i++)if(sel[i].className.indexOf(‘goog-te-combo’)!=-1){teCombo=sel[i];break;}if(document.getElementById(‘google_translate_element2’)==null||document.getElementById(‘google_translate_element2′).innerHTML.length==0||teCombo.length==0||teCombo.innerHTML.length==0){setTimeout(function(){doGTranslate(lang_pair)},500)}else{teCombo.value=lang;GTranslateFireEvent(teCombo,’change’);GTranslateFireEvent(teCombo,’change’)}}
(function gt_jquery_ready() {
if(!window.jQuery||!jQuery.fn.click) return setTimeout(gt_jquery_ready, 20);
if(GTranslateGetCurrentLang() != null)jQuery(document).ready(function() {var lang_html = jQuery(“.gt_languages a[onclick*=’|”+GTranslateGetCurrentLang()+”‘]”).html();if(typeof lang_html != “undefined”)jQuery(‘a.switcher-popup’).html(lang_html.replace(“data-gt-lazy-“, “”)+'<span style=”color:#666;font-size:8px;font-weight:bold;”>▼</span>’);});
})();
</script>

Hi,

What 2 language selectors? If you mean 2 Plugins, it’s just one.

Hi, thanks for your effort. It worked for Desktop version but not for mobile version. When clicking on mobile, nothing popup. Appreciate your time!

• This reply was modified 2 years, 5 months ago by Chris.