Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adding Google Translate widget to the top of a website


Callumjv

Question

15 answers to this question

Recommended Posts

  • 0

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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>
Edited by uronlinebizmgr
Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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? 

Screen Shot 2021-05-06 at 11.08.50 PM.png

Link to comment
  • 0
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? 

Screen Shot 2021-05-06 at 11.08.50 PM.png

What is your site url?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
Posted (edited)

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

image.png.67caedb0661f0d2513f96cee12abbf09.png

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

Edited by MartinD
Link to comment
  • 0
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

image.png.67caedb0661f0d2513f96cee12abbf09.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
Posted (edited)
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

Edited by MartinD
Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
Posted (edited)
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.

 

Edited by MartinD
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

√ó
√ó
  • Create New...