Google Translate’s Toolbar: How to disable the banner

Sunday, September 12th, 2010 | Business | by

Working with multiple languages is tough, one of the great tools is Google Translate Tools.

It lets you specify which languages and make them available on your site.

Unfortunately once you are viewing a page written NOT in your browser’s native language, it pops up automatically.  The banner that pops up pushes your site content down independent of your background graphic, and that can cause problems for certain layout / design approaches.

There’s a quick and easy fix.

Read below….

The Fix

Google Translate’s banner is a Javascript insert into the document, so it’s part of the HTML / DOM.  This is good news for us web developers.  There’s a class assigned to it!

We have 2 problems:

  1. The page is pushed down
  2. The banner itself is there

The solution is to use 2 lines of CSS in your stylesheets:

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

If you put that in there, the banner won’t ever show up. Make sure if you’re doing this, you are including an easy way for people to translate your content (for example theGoogle Translate Tools mentioned above).

Related Posts

Tags: , , , ,

14 Comments to Google Translate’s Toolbar: How to disable the banner

Flash Files
October 11, 2010

Thanks for tip. I didn’t know that Google is able to insert Javascript into the document on my server, but if this is true, than your fix makes sense.
Thanks for sharing

Viltnieks
January 27, 2011

Thank you so much!
This helped me a great deal

Rico
May 3, 2011

Thank you very much!

William
September 5, 2011

wow.. you saved me from slamming my notebook because the stupid IE has problem with google translate banner. thank you!!

Enrico
October 24, 2011

Great, but if banner is hidden, how is possible disable translation ?

Deus
November 6, 2011

Yes, I would like to know what Enrico asked too, please. :)

bvbi
June 15, 2012

es muy muy muy muy dificil descargar este traductor

twitpalas.com
July 5, 2012

Thank you for great tip about google translate toolbar.

daniel
August 21, 2012

just use:
layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false,

Mitch
September 26, 2012

Wow, thanks for the code Sean. It worked great.

wperry1
October 11, 2012

Thanks for the code snippet. Worked like a charm.

Tester
April 4, 2013

“layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false,”

Pls tell me where & how to use this code

Kris
June 18, 2013

Works like a charm thanks Sean

Leave a comment

*


Please share, it makes me happy:

Subscribe to Email Alerts

Follow Me

Follow seangw on twitter

Archives

Categories

prestashop theme

virtuemart template