I need help with google translate embedded code (glitch)

Hello! I need help with this odd glitch associated with a google translate embedded code. Here is the video tutorial I followed
For some reason, every time I translate my current client’s site, the whole page body bounces down just a little bit. You can see this on the development link. Does anyone have any ideas of what this could be? I can also post my txt code on here, but I followed the tutorial verbatim.

Thanks in advance!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi Emily, it’s always best to post your readonly project link if you’d like help, otherwise we cannot see your project to help you locate the issue.

However from the HTML alone, I can see that the problem is a style rule that is added to your body element, which is top: 40px. I only see it happening when the page is loaded on a language other than English ( or more specifically the “select language” setting since English is already the default ).

That suggests it’s probably Google Translate’s scripts adding the style rule, but I’m not sure what it’s trying to do there. I’d check your interactions if you’re using any, and revisit your custom scripts to see if something you’re doing is adding that 40px.

Failing that, you should be able to override that with a style rule;

body { top: 0 !important }

Put this in your site-wide <head> custom code, and the problem is “patched” but try to figure out what’s causing the issue if you can. Better to fix it at the source.

Also want to note that if you’re using Google Translate, Google has attribution requirements. I’m wondering if that area would normally show “translated by Google”?

1 Like

Hi Michael, thank you so much for your reply! The “patch” worked in the mean time when I try to dig in deeper to this.