Adding Google Translate widget to the top of a website

Site URL: http://cephtactics-dental.com

Hey, 

Does anyone know how to add google translate to the top of the website to change all pages to a particular language?

Thank you 🙂

I'm using Gtranslate and also struggling around how to integrate it onto the website. Did you ever get it figured out?

Add to Code Block

<div id="google_translate_element"></div>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>

Tuanphan, when I use the the code below, it works. However, on the mobile site, the the hamburger menu on the right side drops down but it's inoperable but the drop down menu for Google Translate works flawlessly. It's installed on the Bedford template (7.0). Please help!

<div id="google_translate_element"></div>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>

On 12/5/2020 at 9:14 AM, uronlinebizmgr said:

Tuanphan, when I use the the code below, it works. However, on the mobile site, the the hamburger menu on the right side drops down but it's inoperable but the drop down menu for Google Translate works flawlessly. It's installed on the Bedford template (7.0). Please help!

 

<div id="google_translate_element"></div>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>

Can you share site url? We can check easier

Was this issue every resolved?  I have the same problem, once I inject the code or add a code block the mobile hamburger options are disabled.

www.6jdc.org

On 3/9/2021 at 12:45 AM, PF3 said:

Was this issue every resolved?  I have the same problem, once I inject the code or add a code block the mobile hamburger options are disabled.

www.6jdc.org

Hi. Can you add GG Translate code & let me know? We can check easier

On 10/28/2020 at 9:56 AM, tuanphan said:

Add to Code Block

<div id="google_translate_element"></div>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>

 

When i add this code to the code injection in advanced options it does not operate properly. It shows a broken translator symbol and does not translate the website. Is there a work around this? 

11 hours ago, sj1005 said:

When i add this code to the code injection in advanced options it does not operate properly. It shows a broken translator symbol and does not translate the website. Is there a work around this? 

What is your site url?

Hello! I'm having the same problem on my site https://alanonsandiego.org. Our site is using the Version 7.0– Bedford family (Bedford template).

I used the following code and the Google Translator works just fine. But it causes the navigation menu to stop working. The menus appears, but clicking on any menu item does nothing. I've search this forum and the entire Internet and have not found a solution.

If you have a fix to this problem, please share it. Your assistance will be very much appreciated!

HTML:

CSS

Screenshot

Note: The Translator has been removed from the site until the menu problem can be resolved.

On 5/31/2021 at 2:53 AM, MartinD said:

Hello! I'm having the same problem on my site https://alanonsandiego.org. Our site is using the Version 7.0– Bedford family (Bedford template).

I used the following code and the Google Translator works just fine. But it causes the navigation menu to stop working. The menus appears, but clicking on any menu item does nothing. I've search this forum and the entire Internet and have not found a solution.

If you have a fix to this problem, please share it. Your assistance will be very much appreciated!

HTML:

<div id="google_translate_wrapper">

    <div id="google_translate_element"></div>

 

    <script type="text/javascript">

        function googleTranslateElementInit() {

            new google.translate.TranslateElement({ pageLanguage: 'en', includedLanguages: 'en,es' }, 'google_translate_element');

        }

    </script>

 

    <script type="text/javascript"

        src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

</div>

CSS

#google_translate_wrapper { position: fixed; bottom: 0px; right: 0px; z-index:2; }

Screenshot

Note: The Translator has been removed from the site until the menu problem can be resolved.

Can you dupliacate the site & add gg translate & share url? We can check easier

12 hours ago, tuanphan said:

Can you dupliacate the site & add gg translate & share url? We can check easier

Thank you for your response, @tuanphan! Here is a duplicate site with the Google Translator code added.
maroon-flatworm-xhb8.squarespace.com

On 6/2/2021 at 7:38 AM, MartinD said:

Thank you for your response, @tuanphan! Here is a duplicate site with the Google Translator code added.
maroon-flatworm-xhb8.squarespace.com

The site is private. Can you setup password & share url again?

18 hours ago, tuanphan said:

The site is private. Can you setup password & share url again?

Thank you, @tuanphan. This will get you in: 
https://maroon-flatworm-xhb8.squarespace.com/
FixTranslator

11 hours ago, MartinD said:

 

Thank you, @tuanphan. This will get you in: 
https://maroon-flatworm-xhb8.squarespace.com/
FixTranslator

Add to Design > Custom CSS

div#sidecarNav {
    z-index: 975000;
}

On 6/4/2021 at 8:04 AM, tuanphan said:

OMG @tuanphan you're a genius! This bit of CSS code works perfectly. You solved a problem that's been eluding others for years. Thank you so much! You're a valuable member of this community.

@tuanphan Hi Tuanphan, I realize this question was answered some time ago, but I was wondering what to do in a situation where my header nav covers up the translate div while it's in a fixed position. I can add margin to it w/ CSS but since it's in a fixed state, the header nav's additional margin is including on scroll so that there's a gap between the header nav and top of the browser window. 

On 12/15/2021 at 5:34 AM, AppleTreeDC said:

@tuanphan Hi Tuanphan, I realize this question was answered some time ago, but I was wondering what to do in a situation where my header nav covers up the translate div while it's in a fixed position. I can add margin to it w/ CSS but since it's in a fixed state, the header nav's additional margin is including on scroll so that there's a gap between the header nav and top of the browser window. 

Can you share link to your site? We can check easier

Quote

 

<div id="google_translate_element"></div>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>

 

Hi folks (esp guru @tuanphan),
when I copy and paste the exact code as shown above (per other posts)

Squarespace tells me I am missing an opening "{"
If I try to fix and add one in, randomly, it then says there's a syntax error on line 1.

I am trying to add google translate to the top of header- any tips or ideas? complete novice at coding here- is there a step 1 that I am missing? thank you!

On 1/11/2022 at 1:03 AM, Calley said:

Hi folks (esp guru @tuanphan),
when I copy and paste the exact code as shown above (per other posts)

Squarespace tells me I am missing an opening "{"
If I try to fix and add one in, randomly, it then says there's a syntax error on line 1.

I am trying to add google translate to the top of header- any tips or ideas? complete novice at coding here- is there a step 1 that I am missing? thank you!

Hi,

It looks like you are adding to Design > Custom CSS

You need to Add to Settings > Advanced > Code Injection > Footer

I'm trying to get this working in my header on Squarespace 7.1 - I'd like to replace the social media icons with the Google Translate thing. Currently I have the code injection in Settings >Advanced > Code Injection > Header and then the CSS in Design > Custom CSS

https://www.abluetexas.org

Can anyone help?

On 2/9/2022 at 1:16 PM, kurtiskronk said:

I'm trying to get this working in my header on Squarespace 7.1 - I'd like to replace the social media icons with the Google Translate thing. Currently I have the code injection in Settings >Advanced > Code Injection > Header and then the CSS in Design > Custom CSS

https://www.abluetexas.org

Can anyone help?

It looks like you removed it. Do you still need help?

I don't remember why I removed it, but yes I would love to get that integrated. Sorry, I never received a notification when you responded.

On 3/2/2022 at 4:40 AM, kurtiskronk said:

I don't remember why I removed it, but yes I would love to get that integrated. Sorry, I never received a notification when you responded.

I don't seegg translate. Can you bring it back?

@tuanphan

I'm having a similar issue: I can apply the translation dropdown and it does work, but it fluctuates with the navigation bar or falls behind it. On desktop with an announcement banner, it falls behind the bar. With a bar or without look equally terrible on mobile. I'd like to place the translation function above the navigation bar and/or the announcement bar, I just can't get it to stay put.

Can you help?  

https://kitchenworkfoundation-cms.squarespace.com/ 

password: kwf2022