Object shows on wrong place

Hi everyone,

Recently I installed a plugin called GTranslate and I’m trying to optimize it for my website. On the right side of my header, there is a globe that allows people to switch languages but when you open it the flags show up on the right side of the screen. Instead of this, I would love to create a list under the icon in the header. Does anybody now how to change this? The code I used is attached.

Thanks in advance.

Kind regards,
Tim

<span class="gsatelites"></span><span class="gglobe"></span><style>
.gglobe {background-image:url(http://tkmedia.nl/wp-content/uploads/2022/09/translation-global-svgrepo-com.svg);opacity:0.8;border-radius:50%;height:25px;width:20px;background-repeat: no-repeat;cursor:pointer;display:block;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;transition: all 0.3s;}
.gglobe:hover {opacity:1;-moz-transform: scale(1.2);-webkit-transform: scale(1.2);transform: scale(1.2);}
.gsatelite {background-color:#777777;opacity:0.95;border-radius:50%;height:24px;width:24px;cursor:pointer;position:absolute;z-index:100000;display:none;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;transition: all 0.3s;}
.gsatelite:hover {opacity:1;-moz-transform: scale(1.3);-webkit-transform: scale(1.3);transform: scale(1.3);}
</style>

<script>
function renderGSatelites($, e) { $('.gsatelite').remove();
var centerPosition = $('.gglobe').position();
centerPosition.left += Math.floor($('.gglobe').width() / 2) - 10;
centerPosition.top += Math.floor($('.gglobe').height() / 2) - 10;
var language_codes2 = ["nl","en","fr","de","it","pt","ru","es"];
var languages = ["Dutch","English","French","German","Italian","Portuguese","Russian","Spanish"];
var us_flag = false;
var ca_flag = false;
var br_flag = false;
var mx_flag = false;
var qc_flag = false;
var count = language_codes2.length, r0 = 55, r = r0, d = 34, cntpc = 12, nc = 0, m = 1.75;
cntpc = 2 * Math.PI * r0 / 34;
for (var i = 0, j = 0; i < count; i++, j++) {
var x, y, angle;
do {if (j + 1 > Math.round(2 * r0 * Math.PI / d) * (nc + 1) * (nc + 2) / 2) {nc++;r = r + r0;cntpc = Math.floor(2 * Math.PI * r / d);}angle = j * 2 * Math.PI / cntpc + Math.PI / 4;x = centerPosition.left + Math.cos(angle) * r;y = centerPosition.top + Math.sin(angle) * r;
var positionGSatelites = ($('.gsatelites').parent().css('position') == 'fixed' ? $('.gsatelites').parent().position() : $('.gsatelites').offset()),vpHeight = $(window).height(),vpWidth = $(window).width(),tpViz = positionGSatelites.top + y >= 0 && positionGSatelites.top + y < vpHeight,btViz = positionGSatelites.top + y + 24 > 0 && positionGSatelites.top + y + 24 <= vpHeight,ltViz = positionGSatelites.left + x >= 0 && positionGSatelites.left + x < vpWidth,rtViz = positionGSatelites.left + x + 24 > 0 && positionGSatelites.left + x + 24 <= vpWidth,vVisible = tpViz && btViz,hVisible = ltViz && rtViz;if (vVisible && hVisible) {break;} else {j++;}} while (j - i < 10 * count);
$('.gsatelites').append('<span class="gsatelite gs' + (i + 1) + ' glang_' + language_codes2[i] + '" onclick="doGTranslate(\'nl|'+language_codes2[i]+'\')" title="' + languages[i] + '" style="background-image:url(//tkmedia.nl/wp-content/plugins/gtranslate/24/' + (function(l){if(l == 'en' && us_flag)return 'en-us';if(l == 'pt' && br_flag)return 'pt-br';if(l == 'es' && mx_flag)return 'es-mx';return l;})(language_codes2[i]) + '.png);left:' + x + 'px;top:' + y + 'px;"></span>');
$('.gs' + (i + 1)).delay((i + 1) * 10).fadeIn('fast');
}}
function hideGSatelites($) { $('.gsatelite').each(function(i) { $(this).delay(($('.gsatelite').length - i - 1) * 10).fadeOut('fast');});}
(function gt_jquery_ready() {
    if(!window.jQuery||!jQuery.fn.click) return setTimeout(gt_jquery_ready, 20);
    (function($) { $('body').click(function() {hideGSatelites($);});$('.gglobe').click(function(e) {e.stopPropagation();renderGSatelites($, e);});})(jQuery);
})();
</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: 'nl',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';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')}}
</script>

De pagina waar ik hulp bij nodig heb: [log in om de link te zien]