4

Twitter Bootsrap の navbar を使用して、Web サイトの上にナビゲーション バーを配置しています。(class="navbar navbar-fixed-top")
Google 翻訳ウィジェットも使用する必要があります。ここ
に書かれているツールを使用します。

しかし、ユーザーが翻訳する言語を選択すると、Google は私のページの上に水平なナビゲーション バーを配置します。そのバーは、自分のナビゲーション バーを覆い隠します。ナビゲーション バーを Google の水平バーのすぐ下に表示する必要があります。

z-index を使用する必要がありますか? しかし、その場合、そのうちの 1 つが他のナビゲーション バーをマスクしますか? より良い解決策はありますか？それらの1つを別のものの下に表示するには？ありがとうございました

編集: 次のコードをページの上部に追加すると、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>

編集：「言語が異なる場合はGoogle翻訳を表示する」や「水平バーを表示する」などのオプションはないと思います。ユーザーの言語を考慮せずに水平バーをロードすると、すべて正常に機能します。しかし、ネイティブスピーカーにはGoogle翻訳バーが表示されます。マイページからスペースを取ります。

4

4 に答える 4

9

これは醜い解決策ですが、迅速な解決策です。

クリックすると、タグに自動的に class="translated-ltr" または "translated-rtl" が追加されます。これらのクラスを使用して、固定ヘッダーをハックします。

html.translated-ltr .navbar-inner, html.translated-ltr .navbar-inner { padding-top: 39px; }
于 2012-06-05T11:25:04.443 に答える
1

簡単なオプションは

<div class="navbar-inner" style="padding-top:39px;">
于 2012-06-02T14:06:42.117 に答える
1

私はjQueryを使用してチェックします。このコードを使用しています：

setInterval(function(){ 
if ( $('html').hasClass('translated-ltr')) {
  $('.navbar').css('margin-top','30px');
}else{
  $('.navbar').css('margin-top','0px');
}
}, 3000);
于 2018-04-29T06:40:46.270 に答える