带有固定顶部导航栏的Google翻译

Question

我使用Twitter Bootsrap的导航栏将导航栏放在我的网站上.(class ="navbar navbar-fixed-top")
我还需要使用Google Translate小部件.
我使用这里写的工具.

但是,当用户选择要翻译的语言时,Google会在页面顶部放置一个水平导航栏.那个酒吧掩盖了我自己的导航栏.我需要我的导航栏显示在Google的水平栏下方.

我应该使用z-index吗？但在这种情况下,其中一个将掩盖其他导航栏？有更好的解决方案吗？将其中一个显示在另一个下面？谢谢

编辑:当我将以下代码添加到我的页面顶部时,Google会在我的导航栏之前放置一个导航栏,一切看起来都很顺利.但糟糕的是,Google的导航栏对每个用户都是可见的.我只需要向不会说出我页面语言的用户显示.

<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>

编辑:我想没有选项,如"显示谷歌翻译,如果语言不同"和"显示水平栏.如果我加载水平栏而不考虑用户的语言一切正常.但母语人士看到谷歌翻译栏.从我的页面占用空间.

Answer 1

这将是一个丑陋的解决方案,但速度很快.

点击后,标签会自动添加class ="translated-ltr"或"translated-rtl".使用这些类来破解你的固定标题.

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