Position Google Translate bar from top to bottom

[martijnrunia (Martijn)]

Hi Guys,

I’ve implemented Google Translate. The translate button is sticky in the left corner which is fine. But after choosing a new language a new bar appears on top of the page. Does anybody know if and how it’s possible to make that Google Translate bar sticky on the bottom of the page.

Link to site: http://earz.eu/
Read-only link: Webflow - Earz

[samliew (webflowexpert.com)]

According to https://answers.squarespace.com/questions/25433/how-do-i-move-the-placement-of-my-google-translate-bar.html, it would be as simple as some overriding CSS custom code

 <style>
 #google_translate_element {
   position: absolute;
   left: 5px;
   z-index: 1;
 }
 #header {
   margin-top: 10px;
 }
 </style>

[martijnrunia (Martijn)]

Hi @samliew Thanks for the reply. That did not really do the trick. This thing is, i allready have the Google Translate button on the left bottom corner of my site and fixed to the browser window. Which is perfect.

The thing is that after you have clicked on a language a new bar appears on top. See image:

That bar goes over my menu items and on mobile it’s even worse. So i want that bar to be fixed on the bottom of the browser.

Can you help me with that?

Read only linK: Webflow - Earz

[samliew (webflowexpert.com)]

Here’s the style for that

.goog-te-banner-frame {
    top: initial;
    bottom: 0;
}

---

Also, feel free to contact me for further code help and/or customization of third-party plugins

[martijnrunia (Martijn)]

Thanks @samliew

Unfortunately that did not do the trick. But I found out how I can hide the translate bar.

Just add the code below to the Head Code of the site:

<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>

<style type='text/css'>
.goog-logo-link {display:none !important;} 
.goog-te-gadget{color: transparent !important;}
</style>

[martijnrunia (Martijn)]

Hi @samliew

I’ve implemented the GTranslate widget successful by the code i past above. But GTranslate is not translating placeholder text. Do you have any work around to get the placeholder text translated as well?

Example of the page with GTranslate and placeholder text that needs to be translated: https://www.earz.eu/demo/docent

Thanks in advance.

[samliew (webflowexpert.com)]

@martijnrunia

GTranslate is not translating placeholder text. Do you have any work around to get the placeholder text translated as well?

Try this

javascript - Google translate, placeholder text in input type='text' - Stack Overflow

[martijnrunia (Martijn)]

Hi @samliew

Thanks. I found that one but not sure how to implement it in my current code. Can you help out with that?

[martijnrunia (Martijn)]

Hi @samliew
Can you help me with this one? would be really great.