Google translator top bar hide

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

Jacob Hodara

Done via CSS:

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

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.

hide by adding a javascript on your body onload event

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

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}

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

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;

来源：https://stackoverflow.com/questions/5197072/google-translator-top-bar-hide

标签

google-translator-toolkit