• GTranslate plugin for wordpress has some weakness in feature. It only has “Primary Navigation” option to choose for showing in the Menu of the website. Please click here to see, at https://prnt.sc/1r7d4n1

    I want to move the GTranslate Widget to the centre. How to reposition it with CSS code by adding pr changing CSS programming code?
    Below is the GTranslate Widget CSS code for Advance User.

    ——————————————–

    <!-- GTranslate: https://gtranslate.io/ -->
    <style>
    .switcher {font-family:Arial;font-size:10pt;text-align:left;cursor:pointer;overflow:hidden;width:163px;line-height:17px;}
    .switcher a {text-decoration:none;display:block;font-size:10pt;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}
    .switcher a img {vertical-align:middle;display:inline;border:0;padding:0;margin:0;opacity:0.8;}
    .switcher a:hover img {opacity:1;}
    .switcher .selected {background:#ffffff linear-gradient(180deg, #efefef 0%, #ffffff 70%);position:relative;z-index:9999;}
    .switcher .selected a {border:1px solid #cccccc;color:#666666;padding:3px 5px;width:151px;}
    .switcher .selected a:after {height:16px;display:inline-block;position:absolute;right:5px;width:15px;background-position:50%;background-size:7px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='https://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 285 285'><path d='M282 76.5l-14.2-14.3a9 9 0 0 0-13.1 0L142.5 174.4 30.3 62.2a9 9 0 0 0-13.2 0L3 76.5a9 9 0 0 0 0 13.1l133 133a9 9 0 0 0 13.1 0l133-133a9 9 0 0 0 0-13z' style='fill:%23666666'/></svg>");background-repeat:no-repeat;content:""!important;transition:all .2s;}
    .switcher .selected a.open:after {-webkit-transform: rotate(-180deg);transform:rotate(-180deg);}
    .switcher .selected a:hover {background:#f0f0f0}
    .switcher .option {position:relative;z-index:9998;border-left:1px solid #cccccc;border-right:1px solid #cccccc;border-bottom:1px solid #cccccc;background-color:#eeeeee;display:none;width:161px;max-height:198px;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;overflow-y:auto;overflow-x:hidden;}
    .switcher .option a {color:#000000;padding:3px 5px;}
    .switcher .option a:hover {background:#ffffff;}
    .switcher .option a.selected {background:#ffffff;}
    #selected_lang_name {float: none;}
    .l_name {float: none !important;margin: 0;}
    .switcher .option::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);border-radius:5px;background-color:#f5f5f5;}
    .switcher .option::-webkit-scrollbar {width:5px;}
    .switcher .option::-webkit-scrollbar-thumb {border-radius:5px;-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.3);background-color:#888;}
    </style>
    <div class="switcher notranslate">
    <div class="selected">
    <a href="#" onclick="return false;"><img src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/en.png" height="16" width="16" alt="en" /> English</a>
    </div>
    <div class="option">
    <a href="#" onclick="doGTranslate('en|zh-CN');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Chinese (Simplified)" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/zh-CN.png" height="16" width="16" alt="zh-CN" /> Chinese (Simplified)</a><a href="#" onclick="doGTranslate('en|zh-TW');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Chinese (Traditional)" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/zh-TW.png" height="16" width="16" alt="zh-TW" /> Chinese (Traditional)</a><a href="#" onclick="doGTranslate('en|en');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="English" class="nturl selected"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/en.png" height="16" width="16" alt="en" /> English</a><a href="#" onclick="doGTranslate('en|tl');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Filipino" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/tl.png" height="16" width="16" alt="tl" /> Filipino</a><a href="#" onclick="doGTranslate('en|fr');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="French" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/fr.png" height="16" width="16" alt="fr" /> French</a><a href="#" onclick="doGTranslate('en|de');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="German" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/de.png" height="16" width="16" alt="de" /> German</a><a href="#" onclick="doGTranslate('en|id');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Indonesian" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/id.png" height="16" width="16" alt="id" /> Indonesian</a><a href="#" onclick="doGTranslate('en|it');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Italian" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/it.png" height="16" width="16" alt="it" /> Italian</a><a href="#" onclick="doGTranslate('en|ja');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Japanese" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/ja.png" height="16" width="16" alt="ja" /> Japanese</a><a href="#" onclick="doGTranslate('en|ko');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Korean" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/ko.png" height="16" width="16" alt="ko" /> Korean</a><a href="#" onclick="doGTranslate('en|ms');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Malay" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/ms.png" height="16" width="16" alt="ms" /> Malay</a><a href="#" onclick="doGTranslate('en|pt');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Portuguese" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/pt.png" height="16" width="16" alt="pt" /> Portuguese</a><a href="#" onclick="doGTranslate('en|ru');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Russian" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/ru.png" height="16" width="16" alt="ru" /> Russian</a><a href="#" onclick="doGTranslate('en|es');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Spanish" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/es.png" height="16" width="16" alt="es" /> Spanish</a><a href="#" onclick="doGTranslate('en|th');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Thai" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/th.png" height="16" width="16" alt="th" /> Thai</a><a href="#" onclick="doGTranslate('en|vi');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Vietnamese" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/vi.png" height="16" width="16" alt="vi" /> Vietnamese</a></div>
    </div>
    <script>
    jQuery('.switcher .selected').click(function() {jQuery('.switcher .option a img').each(function() {if(!jQuery(this)[0].hasAttribute('src'))jQuery(this).attr('src', jQuery(this).attr('data-gt-lazy-src'))});if(!(jQuery('.switcher .option').is(':visible'))) {jQuery('.switcher .option').stop(true,true).delay(100).slideDown(500);jQuery('.switcher .selected a').toggleClass('open')}});
    jQuery('.switcher .option').bind('mousewheel', function(e) {var options = jQuery('.switcher .option');if(options.is(':visible'))options.scrollTop(options.scrollTop() - e.originalEvent.wheelDelta);return false;});
    jQuery('body').not('.switcher').click(function(e) {if(jQuery('.switcher .option').is(':visible') && e.target != jQuery('.switcher .option').get(0)) {jQuery('.switcher .option').stop(true,true).delay(100).slideUp(500);jQuery('.switcher .selected a').toggleClass('open')}});
    </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: 'en',autoDisplay: false}, 'google_translate_element2');}
    </script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit2"></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;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')}}
    if(GTranslateGetCurrentLang() != null)jQuery(document).ready(function() {var lang_html = jQuery('div.switcher div.option').find('img[alt="'+GTranslateGetCurrentLang()+'"]').parent().html();if(typeof lang_html != 'undefined')jQuery('div.switcher div.selected a').html(lang_html.replace('data-gt-lazy-', ''));});
    </script>
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Repositioning GTranslate Widget in Menu’ is closed to new replies.