1

I want to remove "powered by google translate" in the header and bottom of the dropdown

enter image description here

I need only specific languages dropdown

enter image description here

code

<!DOCTYPE html>
<html lang="en-US">
  <body>

   <h1>My Web Page</h1>
   <p>Hello everybody!</p>
   <p>Translate this page:</p>

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

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

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

   <p>You can translate the content of this page by selecting a language in the select box.</p>

 </body>
 </html>
Nikunj Sakariya
  • 327
  • 4
  • 9

1 Answers1

2

You can add these lines of code in your CSS file:

body {
top: 0px !important; 
}

.goog-logo-link {
    display:none !important;
} 
    
.goog-te-gadget {
    color: transparent !important;
}

.goog-te-banner-frame.skiptranslate {
display: none !important;
}
  • yes @Niranjan-Hira it hides the bottom of the dropdown "powered by google translate" but I need to remove the header iframe also – Nikunj Sakariya Jan 21 '21 at 06:12
  • 1
    Now, add these lines of code in your `CSS` file `body {top: 0px !important;}` and `.goog-te-banner-frame.skiptranslate {display: none !important;}` –  Jan 21 '21 at 07:35
  • It's working fine, Thank you @Niranjan-Hira :) and for specific languages I used {includedLanguages: 'en,zh-CN,'} instead of { pageLanguage: 'en' } – Nikunj Sakariya Jan 22 '21 at 03:23
  • If I want to use flag icons instead dropdown how can I do that – Hamza Afzal Jun 14 '21 at 13:13
  • If you want flag icons then read this: https://stackoverflow.com/questions/10486833/implementing-google-translate-with-custom-flag-icons –  Jun 15 '21 at 17:07
  • Is not working anymore! – Shashank Shah Jul 05 '23 at 11:26