Google translator top bar hide

Question

Google translator top bar hide

25.4k views Asked by user643390 At 11 September 2024 at 13:37

I am using google translator for my website. I want to hide the top bar of google translator let me know how i can hide that one?

Please check my site link here http://www.rewords.com and let me know i to hide that bar?

Thanks

Original Q&A

There are 11 answers

**Cross Coder** · Answer 1 · 2019-10-23 11:04:41

We can achieve it using CSS, Just go and put below CSS code in style tag. That's it..!

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

**sush** · Answer 2 · 2011-03-04 17:23:49

hide by adding a javascript on your body onload event

document.getElementsByTagName("frameset")[0].rows="0,*;

**Jacob Hodara** · Answer 3 · 2011-12-13 19:28:53

Done via CSS:

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

**vbjain** · Answer 4 · 2012-10-01 15:57:36

Some changes in Jacob's answer. Try writing,

<style type="text/css">iframe.goog-te-banner-frame{ display: none !important;}</style>
<style type="text/css">body {position: static !important; top:0px !important;}</style>

This will solve the issue.

**TUHIN KUILI** · Answer 5 · 2023-02-19 07:28:03

try this

.skiptranslate iframe  {
visibility: hidden !important;
    } 
body{
    top:0!important;
    
}

**IT Express Dev** · Answer 6 · 2023-03-03 16:29:33

I have tried several ways, and below one helped me to solve the problem

body {
    top: 0px !important;
}
body > .skiptranslate {
    display: none !important;
}

**Sibin John Mattappallil** · Answer 7 · 2017-02-21 13:26:19

If anybody want javascript to do the job, add the snippet below in your document.ready

if(document.getElementsByClassName('goog-te-banner-frame skiptranslate')[0] !== undefined) {
  document.getElementsByClassName('goog-te-banner-frame skiptranslate')[0].style.display  = 'none';
  document.body.style.top = '0px';
}

How it works: Google loads the toolbar to an iframe with class 'goog-te-banner-frame skiptranslate' and add 40px margin to top of html body. So we hide that frame and set body margin to '0px'.

Note: Refer to the attribution requirements by google https://cloud.google.com/translate/attribution

**AudioBubble** · Answer 8 · 2015-09-02 19:52:36

The body element will fall into the flow - with static. Then you can properly use the display of none.

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

**Sakhawat Hossain Sohel** · Answer 9 · 2024-03-12 09:06:37

You can simply try it in Root CSS:

.skiptranslate>iframe {
  display: none !important;
  z-index: -1;
}
body {
 .......
  top: 0px !important;
}

If you need more info please comment here.

**Faeldihn** · Answer 10 · 2023-03-07 15:57:21

To this very time, solutions proposed here correctly hide the bar, yet the page remains shifted down 40px, hiding my footer and the bottom of my main frame.

After thinking about trapping body change event to look for the bar height and put it as a padding down my body, keeping the bar visible. Yet I found quite a light solution by adding a single line to google's required function itself, for it seems TranslateElement forces the body position to relative, making the CSS body{position useless to set.

HTML

<head>
  <script type="text/javascript">
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({pageLanguage:'en'},'google_translate_element');
      document.body.style.position="static"; /* << to counter overwriting by google func */
      document.body.style.top="0px";         /* << force body pos here if not in CSS     */
    }
  </script>
  ...
</head>

and just keep using the style changes some of you already proposed, thank you.

CSS

body > .skiptranslate { display: none; }        /*     << /!\ hides the bar     */

I guess the next google move will be to also force body{top, so I prefer it in the JS call to their function.

**Always an Artist** · Answer 11 · 2017-04-17 16:16:01

Using some of the code from KDawg, adding margin-top and absolute positioning, I found this addition to the CSS to be the solution for positioning the hidden translation banner only, which doesn't appear until after a language is selected.

This solution does not affect positioning of translate button, or the language selector, which remains on the fixed header.

} iframe.goog-te-banner-frame {
    position:absolute;
    margin-top:30px;

TechQA.

Google translator top bar hide

There are 11 answers

Related Questions in GOOGLE-TRANSLATOR-TOOLKIT

Popular Questions

Popular Tags

Trending Questions