Light the Stream

Put this code into the advanced. It will also make Spanish populate the top of the drop-down
Example Site: https://thdco.specialdistrict.org/

<style>
#google_translate_wrapper {
  background-color: #fff;
  padding: 3px 3px;
  border-radius: 3px;
  display: inline-block;
}

/* Optional: hide skip link */
.skip-to-main-content {
    display: none;
}

/* Hide Google branding (not recommended for production) */
.goog-logo-link,
.goog-te-gadget span {
    display: none !important;
}
.goog-te-gadget {
    color: transparent !important;
}

.goog-te-gadget .goog-te-combo {
    margin: 4px 0;
    background-color: #065F60;
    border-radius: 3px;
    color: #fff;
}
</style>

<div id="google_translate_wrapper">
  <div id="google_translate_element"></div>
</div>

<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement(
      {
        pageLanguage: 'en',
        layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT,
        autoDisplay: false
      },
      'google_translate_element'
    );
  }

  // Move Spanish to top of dropdown
  function moveSpanishToTop() {
    const combo = document.querySelector('.goog-te-combo');
    if (combo && combo.options.length > 1) {
      const options = Array.from(combo.options);
      const spanishOption = options.find(opt => opt.text.toLowerCase().includes('spanish'));
      if (spanishOption) {
        combo.removeChild(spanishOption);
        combo.insertBefore(spanishOption, combo.firstChild);
      }
    }
  }

  // Wait for the dropdown to appear before moving Spanish
  const interval = setInterval(() => {
    const combo = document.querySelector('.goog-te-combo');
    if (combo && combo.options.length > 1) {
      moveSpanishToTop();
      clearInterval(interval);
    }
  }, 500);
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>