带有固定顶部导航栏的谷歌翻译答案

【问题标题】：Google Translate with fixed top navbar带有固定顶部导航栏的谷歌翻译
【发布时间】：2012-06-05 16:50:44
【问题描述】：

我使用 Twitter Bootsrap 的导航栏在我的网站顶部放置一个导航栏。 (class="navbar navbar-fixed-top")
我还需要使用 Google 翻译小部件。
我使用写成here 的工具。

但是当用户选择一种语言进行翻译时，谷歌会在我的页面顶部放置一个水平导航栏。该栏掩盖了我自己的导航栏。我需要我的导航栏出现在 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>

编辑：我想没有像“如果语言不同则显示谷歌翻译”和“显示单杠。如果我在不考虑用户语言的情况下加载单杠，一切正常。但母语人士看到谷歌翻译栏。这占用了我的页面空间。

【问题讨论】：

标签： html twitter-bootstrap google-translate navbar

【解决方案1】：

我使用 jQuery 来检查它，我使用这个代码：

setInterval(function(){ 
if ( $('html').hasClass('translated-ltr')) {
  $('.navbar').css('margin-top','30px');
}else{
  $('.navbar').css('margin-top','0px');
}
}, 3000);

【讨论】：

非常好的解决方案，完美运行。

【解决方案2】：

在你的 CSS 中：

body {
    padding-top: 60px;
}

.navbar-fixed-top {
    position: relative;
    top: -60px;
}

【讨论】：

【解决方案3】：

这将是一个丑陋的解决方案，但很快。

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

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

【讨论】：

我不喜欢 CSS 解决方案，我寻找 js 解决方案。但是如果我将此代码作为 Jquery 行放入我的 js 文件中，我想将其放入“document.load”是不够的..
这正是我所需要的。由于所有 MOdernizr 的东西，没有发现对 HTML 类的更改。但这让我的生活变得轻松多了。好一个彼得。
我觉得正确答案应该是html.translated-ltr body nav.navbar.navbar-default.navbar-fixed-top { padding-top: 39px; }

【解决方案4】：

简单的选择是

<div class="navbar-inner" style="padding-top:39px;">

【讨论】：

Google 的栏并不总是可见。如果用户的语言与我的页面的语言不同，则会显示。如果我把它放到我的页面中，我的导航栏总是比页面顶部低 39px。如果未显示 Google 翻译，则 39px 将为空。如果 Google 的栏可见，是否可以向导航栏添加填充？通过使用 jquery 或 html/div。谢谢
可能，但由于 .goog-te-combo 选择的更改会触发 element.js 上的事件，您可能必须处理下载的 element.js 副本。如果您想自定义，最好使用 API 工作：developers.google.com/translate