This is an old tip, revamped. In the past I offered a tip that added Google Translate to top of site using absolute position. And that works fine, except when zooming in/out. This should work better in regards to placement, whereas it will insert the Google Translate code before the Ning Bar Menu Tabs.


  • Add all code to your Custom Code Box via: My Network/Tools/Custom Code
  • Save.
  • If Google Translate gets in the way based on other elements in your Ning Bar, you can adjust the float:left. Locate this code below: div style="float:left;padding-right:20px; You can change the float:left to float:right;padding-left:20px;


#google_translate_element {height:26px!important;margin-top:3px;}
.goog-te-gadget-simple {padding:0px!important;height:24px!important;}
.goog-te-gadget img {float: left;}
.goog-te-menu-value {margin-top:-5px!important;}

<!-- Google Translate -->
<div id="tmp_translatenbar" style="display:none;">
<div id="google_translate_element"></div>
<script type="text/javascript">// <![CDATA[
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
// ]]></script>
<script src="//" type="text/javascript">// <![CDATA[

// ]]></script>
<script type="text/javascript">
if (typeof(x$) != 'undefined') {
x$("#xn_bar_menu_tabs").prepend('<div style="float:left;padding-right:20px;" id="translatenbar"></div>');
var t_translatenbarCode = document.getElementById('tmp_translatenbar');
var translatenbarCode = document.getElementById('translatenbar');
translatenbarCode.innerHTML = t_translatenbarCode.innerHTML;
<!-- End Google Translate -->




Views: 936

Reply to This

Replies to This Discussion

excellent tip to keep things neat and clean on your network without having to add a bunch of text boxes to achieve what you have hear! I'll be sending you those images soon jen for the custom project we are working on! Im in my office so pardon my sporadic responses lol im a 9-5 corporate guy then a programmer the rest of the day! :) we'll talk soon, but excellent tip here ;)

Hi Armani,

Thank you for the positive feedback, always nice to hear!

No hurry on your icons.



LOL I see, you've created another floater for VIP tips! :)

Yeah, I like VIP Members to be able to access club fast and easy.



Great! This kind of comment is what inspires me to write more tips.



is really good but do not work in my site, I can not make it visible the translator. There any suggestion?

Hi Dr Husky,

I just looked at your Custom Code area to see if there was a problem with the code, but I don't see Jen's code in there.  Did you put it in to try it and then take it out?  By the way, I also see an extra </div> right near the bottom - it doesn't belong there because it does not close any open <div> tag.

Best wishes!


Thanks TJ!

Dr. Husky,

I received your private message, thank you. I'm really confused. The code I provided would not work for you? Can you explain what went wrong?



Sorry for taking so long to reply, I have had many personal problems lately that I walked away from my duties. But now if I'm ready to 100%
Thank you very much for your prompt help, and manages to discover my problem: the problem was that the ningbar hid the translator. Applying a z-index managed to fix it. Now looks great and therefore again to all of you, especially Jen and TJ @ jQueryHelp. They are a great team;)

Brilliant! Thanks Jen!

Hi Glenn, Glad you like it! It's been around for a little while, always nice to see tips resurface. =)



Support & Tips Forum


Started by in Ning Tips & Tricks 2.0. Last reply by Dec 26, 2020. 1 Reply

hope for us all

Started by in Ning Tips & Tricks 2.0 Dec 26, 2020. 0 Replies

Is it Possible to Suppress Top Ad Banner

Started by Harringay Online in Ning Tips & Tricks 2.0. Last reply by Dec 26, 2020. 3 Replies

© 2021   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

VIP Ning Tips