<meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><link rel=stylesheet href=../../css/main.css><link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel=stylesheet><script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script><script>window.jQuery||document.write('<script src="../../js/vendors/jquery-3.3.1.min.js"><\/script>')</script><script>document.write('<script src="//pagea'+'d2.googles'+'yndication.com/pagea'+'d/js/a'+'dsby'+'google.js"><\/script>')</script><script>var superSpecialObject={};superSpecialObject['google_a'+'d_client']='ca-p'+'ub-4469282388984999';superSpecialObject['enable_page_level_a'+'ds']=true;(window['a'+'dsbygoogle']=window['a'+'dsbygoogle']||[]).push(superSpecialObject);</script><header class="page-header js-page-header"><a class=page-header-logo-container href=https://geek-answers.imtqy.com/index.html></a><div class=page-header-text>Geek Answers Handbook</div></header><section class="page js-page"><div itemscope itemtype=http://schema.org/QAPage class=page><div class=main-col itemprop=mainEntity itemscope itemtype=http://schema.org/Question><div class=question-header><h1 itemprop=name>Hide the Google Translate panel</h1></div><div class=question><div class=question-row><div class=question-text><div class=description itemprop=text><p>I have the following code:<pre class=prettyprint-override><code class="hljs cs"><div style=<span class=hljs-string>""</span> <span class=hljs-keyword>class</span>=<span class=hljs-string>"skiptranslate"</span>> <iframe frameborder=<span class=hljs-string>"0"</span> style=<span class=hljs-string>"visibility:visible"</span> src=<span class=hljs-string>"javascript:''"</span> <span class=hljs-keyword>class</span>=<span class=hljs-string>"goog-te-banner-frame skiptranslate"</span> id=<span class=hljs-string>":2.container"</span>></iframe> </div></code> </pre><p>I need to hide it, but if I just hide the goog-te-banner frame using:<pre class=prettyprint-override> <code class="hljs css"><span class=hljs-selector-class>.goog-te-banner-frame</span> { <span class=hljs-attribute>display</span>:none <span class=hljs-meta>!important</span> }</code> </pre><p>He still throws my headline down. If I use this:<pre class=prettyprint-override> <code class="hljs css"><span class=hljs-selector-class>.skiptranslate</span> { <span class=hljs-attribute>display</span>:none <span class=hljs-meta>!important</span> }</code> </pre><p>It also hides the language selection drop-down list, as it has one class. I would like to hide the skiptranslate div, which contains the goog-te-banner frame.<p>How to do it?<p>Edit: This is the actual code to “create” the above div:<pre class=prettyprint-override> <code class="hljs xml"><span class=hljs-tag><<span class=hljs-name>div</span> <span class=hljs-attr>id</span>=<span class=hljs-string>"google_translate_element"</span>></span><span class=hljs-tag></<span class=hljs-name>div</span>></span> <span class=hljs-tag><<span class=hljs-name>script</span> <span class=hljs-attr>type</span>=<span class=hljs-string>"text/javascript"</span>></span><span class=javascript> <span class=hljs-function><span class=hljs-keyword>function</span> <span class=hljs-title>googleTranslateElementInit</span>(<span class=hljs-params></span>) </span>{ <span class=hljs-keyword>new</span> google.translate.TranslateElement({<span class=hljs-attr>pageLanguage</span>: <span class=hljs-string>'en'</span>, <span class=hljs-attr>layout</span>: google.translate.TranslateElement.InlineLayout.SIMPLE, <span class=hljs-attr>autoDisplay</span>: <span class=hljs-literal>false</span>, <span class=hljs-attr>includedLanguages</span>: <span class=hljs-string>''</span>}, <span class=hljs-string>'google_translate_element'</span>);} </span><span class=hljs-tag></<span class=hljs-name>script</span>></span> <span class=hljs-tag><<span class=hljs-name>script</span> <span class=hljs-attr>type</span>=<span class=hljs-string>"text/javascript"</span> <span class=hljs-attr>src</span>=<span class=hljs-string>"http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"</span>></span><span class=undefined></span><span class=hljs-tag></<span class=hljs-name>script</span>></span></code> </pre></div><div class="favorite hidden"><i class="far fa-star"></i></div><div class=votes-question><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count greenc" itemprop=upvoteCount>+4</div><i class="glyphicon glyphicon-arrow-down"></i></div><div class=tags><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" class=tag title="show questions tagged with 'css'" rel=tag>css</a></div><div class=clearfix></div><div class=action-time><span itemprop=author itemscope itemtype=http://schema.org/Person><span itemprop=name><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel=noopener target=_blank>MB34</a></span></span> <time title="2012-06-28 16:10" itemprop=dateCreated datetime=2012-06-28T16:10:02+0000>Jun 28 '12 at 16:10</time></div><a class=aa-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target=_blank rel=noopener>source</a> <a class=s-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title=share>share</a><div class=clearfix></div></div></div></div><ins style=height:90px;display:block data-zxname=zx-adnet data-zxadslot=ZX-QRST data-zxw=0 data-zxh=90 data-zxid=2 data-overlay=false></ins><div class=answers id=answers_hash><div class=answers-header><span class=pull-left><span itemprop=answerCount>6</span> answers</span><div class=clearfix></div></div><div class="answer-pager hidden"></div><div class="answer accepted" id=4408407_hash itemscope itemtype=http://schema.org/Answer itemprop=acceptedAnswer><div class=answer-row><div class=answer-text><div class=desc itemprop=text><p>Ok, this works for some reason:<pre class=prettyprint-override> <code class="hljs css"><span class=hljs-selector-class>.goog-te-banner-frame</span><span class=hljs-selector-class>.skiptranslate</span> { <span class=hljs-attribute>display</span>: none <span class=hljs-meta>!important</span>; } <span class=hljs-selector-tag>body</span> { <span class=hljs-attribute>top</span>: <span class=hljs-number>0px</span> <span class=hljs-meta>!important</span>; }</code> </pre></div><div class=votes-answer><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count greenc" itemprop=upvoteCount>+21</div><i class="glyphicon glyphicon-arrow-down"></i></div><div class=clearfix></div><div class=action-time><span itemprop=author itemscope itemtype=http://schema.org/Person><span itemprop=name><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel=noopener target=_blank>MB34</a></span></span> <time title="2012-06-29 14:33" itemprop=dateCreated datetime=2012-06-29T14:33:31+0000>Jun 29 '12 at 14:33</time></div><a class=aa-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target=_blank rel=noopener>source</a> <a itemprop=url class=s-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title=share>share</a><div class=clearfix></div></div></div></div><ins style=height:90px;display:block;margin-top:15px data-zxname=zx-adnet data-zxadslot=ZX-QRST data-zxw=0 data-zxh=90 data-zxid=3 data-overlay=false></ins><div class="answer rltd" id=4408410_hash itemscope itemtype=http://schema.org/Answer itemprop=suggestedAnswer><div class=answer-row><div class=answer-text><div class=desc itemprop=text><p><strong>The selected answer is incorrect!</strong><p>I know this is an old question, but for those facing this problem in the future, the easiest way is:<pre class=prettyprint-override> <code class="hljs css"><span class=hljs-selector-tag>body</span> > <span class=hljs-selector-class>.skiptranslate</span> { <span class=hljs-attribute>display</span>: none; }</code> </pre><p>Since frames are dynamically added directly to the body, you can simply select only direct descendants and nothing deeper.</div><div class=votes-answer><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count greenc" itemprop=upvoteCount>+4</div><i class="glyphicon glyphicon-arrow-down"></i></div><div class=clearfix></div><div class=action-time><span itemprop=author itemscope itemtype=http://schema.org/Person><span itemprop=name><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel=noopener target=_blank>Syntax</a></span></span> <time title="2015-01-14 16:10" itemprop=dateCreated datetime=2015-01-14T16:10:51+0000>Jan 14 '15 at 16:10</time></div><a class=aa-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target=_blank rel=noopener>source</a> <a itemprop=url class=s-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title=share>share</a><div class=clearfix></div></div></div></div><div class="answer bt" id=4408405_hash itemscope itemtype=http://schema.org/Answer itemprop=suggestedAnswer><div class=answer-row><div class=answer-text><div class=desc itemprop=text><p>Try adding another class, say <code>.myClass {display: none;}</code> , add to skiptranslate, for example <code>class="skiptranslate myClass"</code><p>EDIT:<p>Another solution: You can also wrap the google translation code with another div, say <code><div id="google-wrapper">... google translate code...</div></code> , and then wrap it with <code>display: none;</code><p>OR<p>See this script: <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel="nofollow noreferrer" src>http://jsfiddle.net/SryPD/</a></div><div class=votes-answer><i class="glyphicon glyphicon-arrow-ups"></i><div class=vote-count itemprop=upvoteCount>0</div><i class="glyphicon glyphicon-arrow-down"></i></div><div class=clearfix></div><div class=action-time><span itemprop=author itemscope itemtype=http://schema.org/Person><span itemprop=name><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel=noopener target=_blank>Dexter huinda</a></span></span> <time title="2012-06-28 18:16" itemprop=dateCreated datetime=2012-06-28T18:16:37+0000>Jun 28 '12 at 18:16</time></div><a class=aa-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target=_blank rel=noopener>source</a> <a itemprop=url class=s-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title=share>share</a><div class=clearfix></div></div></div></div><div class=answer id=4408406_hash itemscope itemtype=http://schema.org/Answer itemprop=suggestedAnswer><div class=answer-row><div class=answer-text><div class=desc itemprop=text><p>Why don't you just add an id to the <code>skiptranslate</code> div that contains the <code>skiptranslate</code> -te-banner frame? <code><div id="something" class="skiptranslate" style=""></code> then let you style <code>div#something { display: none !important; }</code> <code>div#something { display: none !important; }</code></div><div class=votes-answer><i class="glyphicon glyphicon-arrow-ups"></i><div class=vote-count itemprop=upvoteCount>0</div><i class="glyphicon glyphicon-arrow-down"></i></div><div class=clearfix></div><div class=action-time><span itemprop=author itemscope itemtype=http://schema.org/Person><span itemprop=name><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel=noopener target=_blank>Roddy of the Frozen Peas</a></span></span> <time title="2012-06-28 19:21" itemprop=dateCreated datetime=2012-06-28T19:21:37+0000>Jun 28 '12 at 19:21</time></div><a class=aa-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target=_blank rel=noopener>source</a> <a itemprop=url class=s-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title=share>share</a><div class=clearfix></div></div></div></div><div class=answer id=4408408_hash itemscope itemtype=http://schema.org/Answer itemprop=suggestedAnswer><div class=answer-row><div class=answer-text><div class=desc itemprop=text><p>I found this to work best for me. I am sending a Google Translate "Primary Text" hint to z-index: -1000. So it’s still on the page, but hidden from view.<pre class=prettyprint-override> <code class="hljs bash"> // Force hiding of <span class=hljs-string>"original text"</span> popup <span class=hljs-keyword>for</span> menus, etc. (very annoying) jQuery(selector).<span class=hljs-built_in>bind</span>( <span class=hljs-string>"mouseenter mouseleave"</span>, <span class=hljs-keyword>function</span> (event) { <span class=hljs-keyword>if</span> (event.type === <span class=hljs-string>'mouseenter'</span>) { google_trans_tt.css(<span class=hljs-string>'z-index'</span>, -1000); } <span class=hljs-keyword>else</span> { google_trans_tt.css(<span class=hljs-string>'z-index'</span>, 1000); } } );</code> </pre></div><div class=votes-answer><i class="glyphicon glyphicon-arrow-ups"></i><div class=vote-count itemprop=upvoteCount>0</div><i class="glyphicon glyphicon-arrow-down"></i></div><div class=clearfix></div><div class=action-time><span itemprop=author itemscope itemtype=http://schema.org/Person><span itemprop=name><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel=noopener target=_blank>Dwight vietzke</a></span></span> <time title="2013-03-12 22:27" itemprop=dateCreated datetime=2013-03-12T22:27:28+0000>Mar 12 '13 at 22:27</time></div><a class=aa-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target=_blank rel=noopener>source</a> <a itemprop=url class=s-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title=share>share</a><div class=clearfix></div></div></div></div><div class="answer last" id=4408409_hash itemscope itemtype=http://schema.org/Answer itemprop=suggestedAnswer><div class=answer-row><div class=answer-text><div class=desc itemprop=text><p><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel="nofollow noreferrer" src>http://thoughtsforbeans.blogspot.in/2012/08/translate-your-website-with-google.html#.Unx4jfmnqQA</a><p>Works well with reference to this code. I fixed it on my site.</div><div class=votes-answer><i class="glyphicon glyphicon-arrow-ups"></i><div class=vote-count itemprop=upvoteCount>0</div><i class="glyphicon glyphicon-arrow-down"></i></div><div class=clearfix></div><div class=action-time><span itemprop=author itemscope itemtype=http://schema.org/Person><span itemprop=name><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel=noopener target=_blank>user2967772</a></span></span> <time title="2013-11-08 06:07" itemprop=dateCreated datetime=2013-11-08T06:07:39+0000>Nov 08 '13 at 6:07</time></div><a class=aa-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target=_blank rel=noopener>source</a> <a itemprop=url class=s-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title=share>share</a><div class=clearfix></div></div></div></div><div class="answer-pager hidden"></div></div></div></div><section class="more-articles-navigation-panel js-more-articles-navigation-panel"><h4>More articles:</h4><nav class="list-of-articles-container js-list-of-articles-container"><ul class="list-of-pages js-list-of-pages"><li><a href=../1420500/index.html>How to write dirty unit tests? - unit-testing</a><li><a href=../1420501/index.html>HtmlUnitDriver not getting page correctly - selenium</a><li><a href=../1420502/index.html>counting integers in a list - c #</a><li><a href=../1420503/index.html>Unable to get monocons for compilation (Mac OS x 10.7.4) - c #</a><li><a href=../1420504/index.html>Google maps V3 dragend listener adds all markers back to the map - javascript</a><li><a href=../1420506/index.html>Why does only a kiosk work in my iOS simulator? - ios</a><li><a href=../1420507/index.html>Error starting java program from C # - java</a><li><a href=../1420508/index.html>Testing Android application on AVD with API level below target on Eclipse - android</a><li><a href=../1420509/index.html>How to say Git I'm updating php? - windows</a><li><a href=../1420510/index.html>Mysql export with Auto_Increment = 1 - mysql</a></ul></nav></section><br><a href=../../allArticles.html><strong>All Articles</strong></a> <script src=../../js/main.js></script><script>(function(d,w,c){(w[c]=w[c]||[]).push(function(){try{w.yaCounter62683636=new Ya.Metrika({id:62683636,clickmap:true,trackLinks:true,accurateTrackBounce:true,webvisor:true});}catch(e){}});var n=d.getElementsByTagName("script")[0],s=d.createElement("script"),f=function(){n.parentNode.insertBefore(s,n);};s.type="text/javascript";s.async=true;s.src="https://mc.yandex.ru/metrika/watch.js";if(w.opera=="[object Opera]"){d.addEventListener("DOMContentLoaded",f,false);}else{f();}})(document,window,"yandex_metrika_callbacks");</script><noscript><div><img src=https://mc.yandex.ru/watch/62683636 style=position:absolute;left:-9999px alt></div></noscript><script>window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;ga('create','UA-166339405-1','auto');ga('send','pageview')</script><script src=https://www.google-analytics.com/analytics.js async defer></script></section><footer class=page-footer><div class="page-footer-legal-info-container page-footer-element"><p>Geek Answers | <span class="page-footer-legal-info-year js-page-footer-legal-info-year">2019</span></div><div class="page-footer-counters-container page-footer-element"><a class=page-footer-counter-clustrmap href=# title="Visit tracker"><img src="https://clustrmaps.com/map_v2.png?cl=698e5a&w=271&t=t&d=IDRwb302jFsed82JlnSkxjeQ3C5_AObCmGX74jggris&co=3a3a3a&ct=ffffff"></a></div></footer>