Skip to main content

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>