Search bar adjustment caused by Google Translate plugin

Hello,

This was added to the site:
https://translate.google.com/manager/website/

Here is a screenshot:
http://screencast.com/t/OPiB3XMCRLy

Here is the current Google Translate code used on every page of the site using a plugin FYI:

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-2420910-1'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Thanks a bunch.

  • Jude
    • DEV MAN

    Howdy @Greg

    Hope you're keeping well !

    Where exactly are you placing the translate code currently ? If Im right you'd want that placed right below your search bar ?

    If thats the case, you need to place this

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

    Right below the search div. Let me know if you need further help, and please enable support access.

    Hope that helps

    Cheers
    Jude

  • Greg
    • The Exporter

    @Jude

    Ok. I just put it in the header.php at the very end (which happens to be below the search bar code).

    So, looks better now.

    However, what would have have to add to that code to force it to either:

    1. justify to the right instead of currently to the left only?
    and/or
    2. justify to the right and be placed immediately below the search bar?
    and/or
    3. Be placed immediately to the left of the search bar on the same line?

    1, 2, and 3 are just potential options independent of each other FYI as a question to ya . . .

    :slight_smile:

  • Michael Bissett
    • Recruit

    Hey @Greg,

    Let's shoot for option #1 here, here's the CSS code that'll be needed to handle that:

    div#google_translate_element .goog-te-gadget-simple {
        position: absolute;
        right: 0;
    }
    
    #masthead #utility {
        margin-top: 30px;
    }

    Could you insert it into your custom CSS area, and seeing if it works on your end as well?

    Please advise,
    Michael

  • Greg
    • The Exporter

    @Michael Bissett

    I can try it. Early, I tried puttin it directly into the header.php and it did ok but now the breadcrumbs and share info is covered by the menu items. Any thoughts the way it is setup now?

    Here: http://screencast.com/t/yohptBRIgC

    After I here back from your input on this then I can try the other unless your next reply works better while keeping the translate box inside the content area above the logo.

    :slight_smile:

  • Greg
    • The Exporter

    @Michael Bissett

    Ok. Cool. WPMUDEV dashboard is enabled.

    Do you want me to REMOVE the code from the header.php (what I recently did prior to you response) so that the translate shows in the far top left corner as it was when I originally opened this thread OR just leave it in the header.php?

    Originally I had it in the plugin for sitewide head in the Add Func plugin for that FYI.

    :slight_smile:

  • Michael Bissett
    • Recruit

    Hey @Greg,

    No removal needed, I was able to sort that one as well with this CSS code:

    body.logged-in #navigation {
        top: 105px;
    }

    I've inserted that, along with the other CSS code I mentioned, into:

    Appearance -> Custom CSS

    Can you confirm that it's looking as it should now on your end, both from a logged-in & a logged out perspective (as your screenshot was showing the logged in perspective).

    Kind Regards,
    Michael

  • Greg
    • The Exporter

    @Michael Bissett

    Looking great Michael on both a login and logout perspective . . .

    If a issue pops up with it, I will come back here but for now it looks great. I like it on the right better too.

    Thanks a lot for the quick followup!

    :slight_smile:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.