Question

我使用Twitter Bootsrap的导航栏将导航栏放在我的网站上。（class =＆＃34; navbar navbar-fixed-top＆＃34;）
我还需要使用Google Translate小部件我使用了here编写的工具。

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

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

编辑：当我将以下代码添加到我的页面顶部时，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>

编辑：我认为如果语言不同，我就没有＆＃34;显示谷歌翻译的选项＆＃34;和＆＃34;显示水平条。如果我在不考虑用户语言的情况下加载水平条，一切正常。但母语人士会看到谷歌翻译栏。这会从我的页面占用空间。

Answer 1

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

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

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

Answer 2

简单的选项是

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

Answer 3

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

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

Answer 4

在你的css中：

body {
    padding-top: 60px;
}

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

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

4 个答案: