Google Translate with fixed top navbar

Я использую навигационную панель Twitter Bootsrap, чтобы разместить навигационную панель поверх моего веб-сайта. (class = "navbar navbar-fixed-top")
Мне также нужно использовать виджет Google Translate.
Я использую инструменты, написанные here.Google Translate with fixed top navbar

Но когда пользователь выбирает язык для перевода, Google помещает горизонтальную навигационную панель поверх моей страницы. Этот бар маскирует мой собственный навигатор. Мне нужно, чтобы мой навигатор отображался чуть ниже горизонтальной полосы Google.

Должен ли я использовать z-индекс? Но в таком случае один из них замаскирует другой навигатор? Есть ли лучшее решение? Чтобы показать одну из них ниже другой? Спасибо

Редактировать: когда я добавляю следующий код в начало моей страницы, 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 Translate, если язык отличается» и «шоу турник Если я загружаю турник без учета пользователя язык все работает нормально, но носители языка.. увидеть Google Translate бар. Который занимает пространство от моей страницы.

источник

2012-05-31 trante

простой вариант будет

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

источник

2012-06-02 14:06:42 baptme

бар Google, не всегда видно. Он отображается, если язык пользователя отличается от языка моей страницы. Если я поместил это на свою страницу, мой навигатор всегда будет на 39 пикселей ниже, чем в верхней части страницы. Когда Google translate не отображается, 39px будет пустым. Можно ли добавить дополнение к навигатору, если панель Google видна? Используя jquery или html/div. Спасибо – trante

Возможно, но так как изменение .goog-te-combo select вызывает событие на element.js, вам, возможно, придется работать с загруженной копией element.js. Возможно, вам лучше работать с API, если вы хотите настроить: https://developers.google.com/translate/ – baptme

Это было бы некрасиво решение, но быстрый один.

После щелчка тег автоматически добавит class = "transl-ltr" или "transl-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

Это было именно то, что мне было нужно. Не заметил изменения в HTML-классе из-за всего материала MOdernizr. Но это облегчило мою жизнь. Хороший Питер. – 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 Translate with fixed top navbar

ответ

Смежные вопросы