Hiding Google Translate bar


I have the following code:

<div style="" class="skiptranslate">
  <iframe frameborder="0" style="visibility:visible" 
          class="goog-te-banner-frame skiptranslate" 

I need to hide it but if I only hide the goog-te-banner-frame using:

.goog-te-banner-frame {
    display:none !important

It still throws my header down. If I use this:

.skiptranslate {
    display:none !important

It also hides the language selection dropdown because it shares the same class.
I’d like to hide the skiptranslate div that CONTAINS the goog-te-banner-frame.

How do I do that?

This is actual code to “create” the translate div above:

<div id="google_translate_element"></div>
<script type="text/javascript">
    function googleTranslateElementInit() {
        new google.translate.TranslateElement({pageLanguage: 'en', 
        layout:     google.translate.TranslateElement.InlineLayout.SIMPLE,
        autoDisplay: false, 
        includedLanguages: ''}, 'google_translate_element');}
<script type="text/javascript" src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>


Ok, this works for some reason:

.goog-te-banner-frame.skiptranslate {
    display: none !important;
body {
    top: 0px !important; 

Answered By – MB34

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published