Skip to main content

Integrated Google Translate

Here is a better integrated Translate dropdown that goes into the Secondary Navigation menus.

Alongside the code and styles, you need to create a page called 'Google Translate' on the site and have it published. Once it exists, add it to the Secondary Navigation menu structure.

Style depending on where it is in the list of menu items:

  • If you have it as the last value, the style will work as is.
  • If there are more options after it, adjust the right padding to 20.
  • If it is the first item, adjust the right padding to 20 and remove left padding.
  • If it is solo then delete all padding.

 

You can delete the top bar style code from the site when using this as it is included in this code. 

 

Styles 

//This hides the Google Translate image
.goog-te-gadget .VIpgJd-ZVi9od-l4eHX-hSRGPd {
  display: none !important;
}
//This hides the Google Translate text
.skiptranslate.goog-te-gadget {
  font-size: 0;
}

//Google translate bar
.goog-te-gadget{
  padding-left: 20px; // Pushes it off the left line
  padding-right: 10px; // Pushes it off the right line
  color: #000; // Makes the text black
}

Site-wide body 

<! --START OF GOOGLE TRANSLATE-->
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<! --ABOVE IS THE BASIC TOB BAR CODE, BELOW IS THE NEW STUFF -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    var languageLink = document.querySelector('.secondary-navigation a[href="/google-translate"]');
    if (!languageLink) {
        console.warn("Language link not found!");
        return;
    }
    languageLink.style.display = 'none';
    var googleTranslateElement = document.getElementById('google_translate_element');
    if (googleTranslateElement) {
        languageLink.parentElement.replaceChild(googleTranslateElement, languageLink);
        googleTranslateElement.style.display = 'block'; // Make it visible
    }
});
</script>
<! --END OF GOOGLE TRANSLATE-->