Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #19220


    I am trying to get the Google Translate widget in the header but the position is very wierd as you can see:

    I used to do it and I am trying to get it this way:

    I put the folowing code in custom.css:


    left: 900px;

    position: relative !important;

    top: 20px;


    What’s do you think is the probleme?

    Thank you.



    Hi Elodie,

    You need to remove the block from the img inside the widget:

    .goog-te-gadget img {
    display: inline;

    Additionally, its overlapping with the border you have at the top of the header.




    Thank you for your response but where can I remove those lines?

    I have copy and past this in the header:

    <meta name=”google-translate-customization” content=”78875d7517c0bde8-f959d67f17abb757-g22fabe3ede8259ed-16″></meta>

    <div id=”google_translate_element”></div><script type=”text/javascript”>

    function googleTranslateElementInit() {

    new google.translate.TranslateElement({pageLanguage: ‘fr’, includedLanguages: ‘de,en,es,it’, layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, ‘google_translate_element’);


    </script><script type=”text/javascript” src=”//”></script>

    It’s not a plugin.

    And how can I remove the border at the top?

    Thank you again for your response. I really need your help.




    Hi Elodie,

    Try to add this code at the bottom of your custom.css:

    #google_translate_element img {
    display: inline-block !important;

    .goog-te-gadget-simple {
    width: 156px !important;

    Hope this helps.




    Thank you Ismael, it’s getting better.

    My last concern is that the widget is above the header and I will like it on the right side of my logo.

    I’ve played with “top: 40px;” but this way the widget is showing under the white line but not working.

    How come I have a top container? Can I remove?

    Thank you again for you great support.




    The div will be wherever you place it in the header.php file. So if you want it down under the border, you need to put it under the div called fancyborder.




    Hello Devin,

    Thank you but I I place the code under <div class=’fancyborder’></div> like you suggested, the widget disapeared and my header container is lower.

    I have try every possible placement and the widget is still not at the right place.

    Do you have a last suggestion?

    I aloso try to remove the line <div class=’fancyborder’></div> but the fancy border is still there.

    Thank you again.



    Typically this isn’t what we are able to support as its not part of theme issues and should really be under the realm of a freelance developer.

    However, the fix is fairly simple. The element should be inside the main container so that you can just absolute position it and align it to the right.

    In the header.php move the google div just below the div class=”container main_menu”. Then change your css for it to:

    #google_translate_element {
    right: 0;
    position: absolute;
    top: 60px;

    For any adjustments you need to make see:




    Thank you for your time and advise. I really appreciate it.

    It’s working the way I wanted it:-)

    I add to change:

    #header .container{

    /*height:90px;*/ to 150 to have the widget finally working.


Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Google Translate widget position’ is closed to new replies.