Google Translate in Nav
<!-- Google Translate Container -->
<div id="google_translate_element" style="display: none;"></div>
<!-- Google Translate Initialization -->
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT,
autoDisplay: false
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- Inject Translate into Nav -->
<script>
document.addEventListener('DOMContentLoaded', function () {
const translateEl = document.getElementById('google_translate_element');
if (!translateEl) return;
function createTranslateWrapper() {
const wrapper = document.createElement('div');
wrapper.id = 'google_translate_element_wrapper';
wrapper.style.display = 'flex';
wrapper.style.alignItems = 'center';
wrapper.style.marginLeft = 'auto';
wrapper.style.padding = '4px 8px';
translateEl.style.display = 'block';
wrapper.appendChild(translateEl);
return wrapper;
}
// === Homepage Nav ===
const homepageNav = document.querySelector('#amplify-navigation .container');
const homepageMenu = document.querySelector('.sl-modern-menu');
if (homepageNav && homepageMenu) {
const navWrapper = document.createElement('div');
navWrapper.className = 'nav-flex-wrapper';
navWrapper.style.display = 'flex';
navWrapper.style.alignItems = 'center';
navWrapper.style.justifyContent = 'space-between';
navWrapper.style.width = '100%';
navWrapper.appendChild(homepageMenu);
navWrapper.appendChild(createTranslateWrapper());
homepageNav.innerHTML = '';
homepageNav.appendChild(navWrapper);
}
// === Interior Nav ===
const interiorNavbar = document.querySelector('#page-navigation-navbar');
if (interiorNavbar) {
interiorNavbar.style.display = 'flex';
interiorNavbar.style.alignItems = 'center';
interiorNavbar.style.justifyContent = 'space-between';
interiorNavbar.appendChild(createTranslateWrapper());
}
// === Styles
const style = document.createElement('style');
style.textContent = `
#google_translate_element_wrapper select {
background-color: #4a5361 !important;
color: #fff !important;
border: 1px solid #888 !important;
border-radius: 4px;
padding: 3px 5px;
font-size: 13px;
height: 28px;
}
.VIpgJd-ZVi9od-l4eHX-hSRGPd span:first-child {
display: none !important;
}
.goog-logo-link,
.goog-te-gadget span,
.VIpgJd-ZVi9od-xl07Ob-lTBxed {
color: #fff !important;
font-size: 12px !important;
white-space: nowrap !important;
}
.VIpgJd-ZVi9od-l4eHX-hSRGPd a {
display: flex !important;
align-items: center !important;
gap: 4px;
}
.goog-te-gadget {
display: flex !important;
align-items: center !important;
gap: 4px;
font-family: Arial, sans-serif !important;
font-size: 11px !important;
color: #fff !important;
}
@media (max-width: 767px) {
.nav-flex-wrapper,
#page-navigation-navbar {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
#google_translate_element_wrapper {
width: 100%;
justify-content: flex-start;
padding-top: 8px;
}
#google_translate_element_wrapper select {
width: 100%;
}
}
`;
document.head.appendChild(style);
});
</script>