I need some help styling and changing the way the Google Translate plugin works.
I'm implementing it on my website and the way I want it to work is just to have the initials of the language.
So by default is should en EN, and then when clicked a dropdown appears with FR, ES, DE. First thing I'm having difficulty is just removing the google logo with a simple string "EN".
Is there any way to do what I want? Here is a JSFiddle with my code - https://jsfiddle.net/7rLd4sg6/
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="styles.css" />
<title>Teste Google Dropdown</title>
</head>
<body>
<p>Google Translate Test</p>
<div id="google_translate_element">
<span>EN</span>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{
pageLanguage: "pt",
includedLanguages: "en,fr,es,de",
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
},
"google_translate_element"
);
}
</script>
</div>
<script
type="text/javascript"
src="https://translate.google.com/translate_a/element.js?
cb=googleTranslateElementInit"
>
//Plugin Customize
$(document).ready(function(){
$('#google_translate_element').bind('DOMNodeInserted', function(event) {
$('.goog-te-menu-value span:first').html('LANGUAGE');
$('.goog-te-menu-frame.skiptranslate').load(function(){
setTimeout(function(){
$('.goog-te-menu-frame.skiptranslate').contents().find('.goog-te-menu2-item-selected .text').html('LANGUAGE');
}, 100);
});
});
});
</script>
</body>
</html>
Thank you in advance.