구글은 고정 된 상단 navbar와 함께

Question

나는 내 웹 사이트의 상단에 탐색 모음을 넣어 트위터 Bootsrap의 navbar를 사용합니다. (class = "navbar navbar-fixed-top")
Google 번역 위젯을 사용해야합니다.
나는 here로 쓰여진 도구를 사용한다.

하지만 사용자가 번역 할 언어를 선택하면 Google에서 내 페이지 상단에 가로형 탐색 바를 표시합니다. 그 바는 내 자신의 navbar를 감추고 있습니다. Google 가로 막대 바로 아래에 내 탐색 바가 필요합니다.

Z- 색인을 사용해야합니까? 하지만 그 중 하나는 다른 navbar를 가릴 것입니까? 더 좋은 솔루션이 있습니까? 그 중 하나를 다른 것 아래에 표시 하시겠습니까? 감사합니다.

편집 : 내 페이지 상단에 다음 코드를 추가하면 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

가 쉬운 옵션은

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

Answer 2

이는 추한 솔루션하지만 빠른 하나가 될 것입니다 것입니다.

클릭하면 태그가 자동으로 class = "translated-ltr"또는 "translated-rtl"을 추가합니다. 이 클래스를 사용하여 고정 헤더를 해킹하십시오. 당신의 CSS에서

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

Answer 3

:

body { 
    padding-top: 60px; 
} 

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