帶固定頂部導航條的Google翻譯

我使用Twitter Bootsrap的導航欄將導航欄放在我的網站上。（class =「navbar navbar-fixed-top」）
我還需要使用Google Translate小部件。
我使用的書寫工具爲here。帶固定頂部導航條的Google翻譯

但是，當用戶選擇要翻譯的語言時，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>

編輯：我想有一個像沒有其他選擇「顯示谷歌翻譯，如果語言是不同的」和「顯示單槓如果我加載單槓不考慮用戶的語言一切工作正常，但母語。看到谷歌翻譯吧。從我的網頁需要的空間。

來源

2012-05-31 trante

容易的選擇將是

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

來源

2012-06-02 14:06:42 baptme

谷歌的酒吧並不總是可見。顯示用戶的語言是否與我的頁面語言不同。如果我把它放到我的頁面中，我的導航欄總是比頁面頂部低39px。當谷歌翻譯沒有顯示，那39px將是空的。如果Google的欄可見，是否可以嚮導航欄添加填充？通過使用jquery或html/div。謝謝 – trante

可能，但由於.goog-te-combo select的更改觸發了element.js上的事件，因此您可能需要處理element.js的下載副本。如果你想自定義，你可能更適合使用API：https://developers.google.com/translate/ – baptme

這將是一個醜陋的解決方案，但一個快速。

點擊標籤後會自動添加class =「translated-ltr」或「translated-rtl」。使用這些類來破解你的固定頭文件。

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

來源

2012-06-05 11:25:04

我不喜歡CSS解決方案，我尋找一個js解決方案。但是，如果我把這段代碼放到我的js文件中作爲Jquery行，我想把它放到「document.load」是不夠的。 – trante

這正是我所需要的。由於所有MOdernizr的東西，沒有發現HTML類的變化。但是這讓我的生活變得更加輕鬆。尼斯一個彼得。 – Jag

我認爲正確的答案應該是'html.translated-ltr body nav.navbar.navbar-default.navbar-fixed-top {padding-top：39px; }' – Hieu

-1

在你的CSS：

body { 
    padding-top: 60px; 
} 

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

來源

2014-09-10 12:35:58

帶固定頂部導航條的Google翻譯

回答

相關問題