Google Translate with fixed top navbar

Question

I use Twitter Bootsrap's navbar to put a navigation bar on top of my website. (class="navbar navbar-fixed-top")
I also need to use Google Translate widget.
I use tools written here.

But when user selects a language to translate, Google puts a horizontal navbar on top of my page. That bar masks my own navbar. I need my navbar appear just below the Google's horizontal bar.

Should I use z-index ? But in that case one of them will mask other navbar? Is there a better solution? To show one of them below another? Thank you

edit: when I add following code to the top of my page, Google puts a navbar before my navbar, and everything seems well. But the bad thing is, Google's navbar is visible for every user. I need to show only to the users that doesn't speak my page's language.

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'fr',
    layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

edit: I suppose there is no option like "show google translate if language is different" and "show horizontal bar. If i load horizontal bar without considering the user's language everything is working fine. But the native speakers see the Google Translate bar. Which takes space from my page.

Answer 1

This would be a ugly solution but a quick one.

After clicked the tag will automatically add class="translated-ltr" or "translated-rtl". Use these class to hack your fixed header.

html.translated-ltr .navbar-inner, html.translated-ltr .navbar-inner { padding-top: 39px; }