I’ve added a Google translate plugin to the footer of my website www.caligenix.com. When I translate the website to Spanish, the nav menu on mobile breaks. How can I fix this?
Hi @Ali_Abbas, thanks for the post. I took a peek a the site on iphone, and it seemed to work for me. Could you help to provide a little more description, how exactly it is not working for you?
Screenshots would help and knowing the exact device model will also help.
Thanks in advance!
This is how it looks when translated to Spanish using the plugin in the footer. Using iPhone 6S Safari:
The icons should be above each nav link, like it is when the site is in English.
Hi @Ali_Abbas, thanks for the update. I can see now what you are referring, it seems that the google translate plugin is adding styles to the page at runtime when the page is published, that screws up the menu styling.
The issue happens at all viewports, not just the mobile view.
I am checking to see if there are any overrides or custom css that might be used to suppress those changes made by the Google Translate plugin.
I will get back to you once I have a some new info.
1 Like
Any way to fix this issue?
Hi Ali_Z
I haven’t had chance to look at your specific issue, but I got Google Translate to work with the following style and code. It works ok on Desktop and Mobile and displays the Translate widget in the bottom corner. I tend to have an extras.css then add to the site Custom code panel: <link rel="stylesheet" type="text/css" href="css/extras.css">
Add to CSS (extras.css in my case):
/* position Google Translate widget in bottom right corner */
#translatepos {
position: fixed;
bottom: 0px;
right: 0px;
z-index:2;
}
Add before </head>…
<meta name="google-translate-customization" content="--------------add your number here---------">
note: to add your content number where it says: --------------add your number here---------
Add the usual widget code, wrapped with the translatepos style, before </body>…
<!-- Translation Corner Option -->
<div id="translatepos">
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'bg,bn,cs,cy,da,de,el,en,es,et,fi,fr,hi,hr,hu,it,iw,ja,lt,lv,mk,nl,no,pl,pt,ro,ru,sk,sl,sq,sr,sv,th,tr,uk,ur,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>
you might want to change some of the languages in the includeLanguages list also.
Good luck!
I already have Google Translate on my website. I just want to solve the issue where the navigation on mobile breaks when the site is translated. I put a screenshot of the issue in the second post of this thread. Looks like Google in injecting their own style into my website when I just want it to translate the text. Any way around this?
Hi @Ali_Abbas
Apologies for the slow response and for pitching an answer when you’re obviously way past this stage - I should have studied your post a little closer.
I noticed that you menu looks fine in Safari (and other browsers) now. Is this because you’re using Best Translation Services, or have you sorted the issue?
today:
We’ve been using Google Translate for a number of years now and the only format issue we’ve found was when we had our html4 sites using a third party CMS which had newline and paragraph set to <br /> instead of <p>. GT just ignored the <br /> tags effectively bunched up entire pages of text. All fixed after editing every page and setting the editor to <p>. Quite a job at the time!
By the way, I really like your site, very nice balance and look. The translate option itself works well (better than the std widget). I’ve been looking for a way to use a different pop-up (to Google’s) for the languages selection, so might have a look at the service you’re using. There was a really nice routine written for WordPress sites, but I never really had the time to get it to work for our sites.
All the best.
Yes I just used a new plugin from http://conveythis.com - it’s free and gets the job done. Wish I could translate without the top header but this will do for now.