Above header Google Translate with background
<style> /* Make the "Powered by Google Translate" text and link white */ .VIpgJd-ZVi9od-l4eHX-hSRGPd, .VIpgJd-ZVi9od-l4eHX-hSRGPd:link, .VIpgJd-ZVi9od-l4eHX-hSRGPd:visited, .VIpgJd-ZVi9od-l4eHX-hSRGPd:hover, .VIpgJd-ZVi9od-l4eHX-hSRGPd:active, .goog-te-gadget span { color: #fff !important; font-size: 12px !important; font-weight: bold !important; text-decoration: none !important; } /* Optional: remove underline on hover */ .VIpgJd-ZVi9od-l4eHX-hSRGPd:hover { text-decoration: none !important; } /* Force the Google Translate dropdown text to white */ .goog-te-gadget .goog-te-combo { background-color: #4a5361 !important; color: #fff !important; border: 1px solid #ccc !important; border-radius: 4px; padding: 2px 6px; } </style> <!-- Google Translate setup --> <div id="google_translate_element" style="display: none;"></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'); } </script> <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> <!-- Header with Google Translate Only --> <script> document.addEventListener('DOMContentLoaded', function () { // === 1. Inject Custom Header Bar === const headerBar = document.createElement('header'); headerBar.className = 'header-link-bar'; headerBar.innerHTML = <div class="container"> <div id="google_translate_element_wrapper"></div> </div> ; const existingHeader = document.querySelector('header'); if (existingHeader && existingHeader.parentNode) { existingHeader.parentNode.insertBefore(headerBar, existingHeader); } // === 2. Inject Styling === const style = document.createElement('style'); style.textContent = .header-link-bar { background-color: #4a5361; padding: 0 15px; color: #fff; } .header-link-bar .container { display: flex; justify-content: flex-start; align-items: center; height: 48px; font-size: 14px; padding: 8px 0; } #google_translate_element_wrapper { display: flex; align-items: center; } .header-link-bar #google_translate_element select { background-color: #4a5361; color: #fff; border: 1px solid #888; border-radius: 4px; padding: 3px 5px; font-size: 13px; height: 28px; } .header-link-bar .goog-logo-link, .header-link-bar .goog-te-gadget span, .header-link-bar .VIpgJd-ZVi9od-xl07Ob-lTBxed { color: #fff !important; font-size: 12px !important; white-space: nowrap !important; } .header-link-bar .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) { .header-link-bar .container { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; height: auto; text-align: left; } .header-link-bar #google_translate_element select { width: 100%; font-size: 14px; } } ; document.head.appendChild(style); // === 3. Move Google Translate into Header === const translateEl = document.getElementById('google_translate_element'); const customWrapper = document.getElementById('google_translate_element_wrapper'); if (translateEl && customWrapper) { customWrapper.appendChild(translateEl); translateEl.style.display = 'block'; } }); </script>