Google translater plugin bar is covering website contents

HTML & CSS
1

Hi guys,

i have a serious issue with google translate plugin. the translater bar on top hides some contents of the header. how to fix this folks.

please see the screen shot.

It looks like the translater bar has a an id of .goog-te-banner

2

please find the image link https://imgur.com/a/dDRso

3

Would this be related to PHP, though? Surely it’s more likely to be a HTML or CSS issue?

4

Hi droopsnoot,

i am sure it can be fixed using css since we have the handle. but i am not sure how to do that.

5

I can’t speak for others, but a screen capture alone is not enough for me to even begin to think of ways to fix the problem. I would need to at least see the HTML and CSS for that area of the page.

2 Likes
6

@afridy,

You have the code and you do not know how to fix the issue. We do not have the code. How do you expect us to suggest a fix for an issue without the code?

Really!

If you cannot post a working page with relevent code, post a link to the site. If you cannot post a link to the site, go to school and learn how to fix the issue yourself. I don’t know what else to suggest. We are not clairvoyant.

EDIT: You could hire a consultant who you trust to fix it for you.

7

HTML with inline style attributes doesn’t make design tweaking any easier. Anyway, this is what it looks like for me using Vivaldi dev tools

I don’t see it interfering with anything, Which browsers have you tested with and which have a problem?

Does it look like code within “pull-right” needs to be changed or it’s containers?

<!--------------------------------------------------GOOGLE NATIVE TRANSLATOR DROP DOWN---------------------------------------->
<div class="pull-right" style="visibility:hidden;" id="google_translate_element">
  <div class="skiptranslate goog-te-gadget" dir="ltr">
    <div id=":0.targetLanguage" class="goog-te-gadget-simple" style="white-space: nowrap;">
      <img src="https://www.google.com/images/cleardot.gif" class="goog-te-gadget-icon" alt="" style="background-image: url(&quot;https://translate.googleapis.com/translate_static/img/te_ctrl3.gif&quot;); background-position: -65px 0px;">
      <span style="vertical-align: middle;">
        <a aria-haspopup="true" class="goog-te-menu-value" href="javascript:void(0)">
        <span>Select Language</span>
        <img src="https://www.google.com/images/cleardot.gif" alt="" width="1" height="1">
        <span style="border-left: 1px solid rgb(187, 187, 187);">​</span>
        <img src="https://www.google.com/images/cleardot.gif" alt="" width="1" height="1">
        <span aria-hidden="true" style="color: rgb(118, 118, 118);">â–Ľ</span>
        </a>
      </span>
    </div>
  </div>
</div>
8

<ot>
@Mittineague, how did you find the URL to the site, please?
</ot>

9

Given via a message

10

@afridy,

So far, I see almost the same thing that @Mittineague sees when I click the row of language flags (I obscured the logo name on the image).

1400Ă—468 187 KB

The Google language bar does not appear in Firefox or Chrome (older version) as it does in your screen shot. Can you tell us please describe you development/test environment? browser(s) and version(s)? Perhaps that will help us understand the difference between your screen shot and ours.

The following observations may be helpful as you continue building the site.

I feel sure that over the years that you have been visiting us, someone has mentioned the value of validating your code as development progresses. At this time, the HTML validator, https://validator.w3.org/nu/ , reports 56 errors and 61 warnings. Some of the errors are very significant and could well be the reason that the code does not behave as expected.

You might notice that the horizontal menu intrudes in the Logo at some widths. The font-size in my browser is set to 120%, so that might be consideration; however, @Mittineague’s screen shot shows a bit of intrusion, too.

There is no HTML tag at the top of the page, yet there is one at the bottom. The validator barked at the two <head> tags, too… and there are duplicate IDs in use.

I DO recommend that you start your troubleshooting by validating the code on your site. I can’t imagine anyone feeling inspired to try to make anything work as desired when the HTML is improperly structured. Improperly structured HTML cannot be counted on to work consistently across the wide assortment of browsing devices that we have nowadays. That’s just the way it is.

I’m sorry I cannot give you a plug-n-play drop-in answer to the Google translator issue.

1 Like
11

HI folks,
i am in a hurry and ill reply you in detail later.
but i just took few minutes to check again and yes. when i click on a language in that popup menu appearing after click on flags, the google trans bar appears and covers exactly as in my screen shot. i also check it in opera 45 and the result is same. also double checked in firefox 52 and result is same. i am on a centos 7 pc. but two other windows users also reported the same.

12

I see the Google menu bar now. I must have misread your earlier post. I clicked on the row of flags, but did not click on a language in the drop down menu.

13

I do not believe that the HTML is structured in a way that will behave the way you wish today. A bootstrap person may know of a way, but I don’t see one, yet. Have you given any thought to validating your code?

14

Hi guys,

Thanks for all your efforts :blush:
one of my friend came up with this code after he said googling and it worked!

.goog-te-banner-frame.skiptranslate {
    display: none !important;
} 
body {
    top: 0px !important; 
}
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.