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

    Hello,

    I am trying to get the Google Translate widget in the header but the position is very wierd as you can see: http://chambresdhotes-lesmolieres.com

    I used to do it and I am trying to get it this way: http://www.la-maison-d-ines.com

    I put the folowing code in custom.css:

    #google_translate_element{

    left: 900px;

    position: relative !important;

    top: 20px;

    }

    What’s do you think is the probleme?

    Thank you.

    Elodie

    #102714

    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.

    Regards,

    Devin

    #102715

    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=”//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit”></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.

    Best,

    Elodie

    #102716

    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.

    Regards,

    Ismael

    #102717

    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.

    Best,

    Elodie.

    #102718

    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.

    Regards,

    Devin

    #102719

    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.

    Elodie.

    #102720

    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: http://www.w3schools.com/cssref/pr_class_position.asp

    Regards,

    Devin

    #102721

    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.

    Elodie

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

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