Twitter Bootstrap Navbar с фиксированным верхним перекрытием сайта

347

Я использую загрузчик на моем сайте, и у меня возникают проблемы с верхней панелью navbar. Когда я просто использую штатную навигационную панель, все нормально. Тем не менее, когда я пытаюсь переключить его на панель навигации с фиксированным верхом, весь другой контент на сайте перемещается вверх, как будто панель навигации отсутствует, и панель навигации перекрывает ее. вот как я это изложил:

.navbar.navbar-fixed-top
  .navbar-inner
    .container
.container
  .row
    //yield content

я попытался скопировать примеры начальной загрузки точно, но все еще имел эту проблему только при использовании navbar с фиксированной вершиной. Что я делаю не так?

html twitter-bootstrap Мэтью Берман
источник

527

Ваш ответ прямо в документах :

Обивка тела требуется

Фиксированная навигационная панель будет перекрывать ваш другой контент, если вы не добавите paddingв верхнюю часть <body>. Попробуйте свои собственные значения или используйте наш фрагмент ниже. Подсказка. По умолчанию навигационная панель имеет высоту 50 пикселей.
body { padding-top: 70px; }
Обязательно включите это после основного Bootstrap CSS.

и в Bootstrap 4 документа ...

Фиксированные навигационные панели используют position: fixed, это означает, что они вытянуты из обычного потока DOM и могут потребовать пользовательский CSS (например, padding-top на) для предотвращения наложения на другие элементы.

rfunduk
источник

16

Но когда вы минимизируете окно, после 40px появляется панель навигации, как мне ее обработать?

Аравиндхан

5

Это появляется после 40px, вероятно, потому что вы не «добавляете это после основного Bootstrap CSS и до необязательного адаптивного CSS».

Коллимарко

1

Этот ответ верен, но он работает только тогда, когда вы делаете отступ 40px адаптивным, см. Ответ Дэна или Ника.

Тони Батгейт,

1

Смотрите ответ от @ qub1n, если вы не хотите добавлять отступы (или что-то еще).

scharfmn

2

@JerSchneid Пример для navbar-fixed-top на w3schools.com демонстрирует то же поведение. Я склонен называть это ошибкой.

Тони Мартин

125

Как уже говорили другие, добавление верхней части кузова прекрасно работает. Но когда вы делаете экран более узким (по ширине сотового телефона), между панелью навигации и корпусом возникает разрыв. Кроме того, переполненная навигационная панель может переноситься на многострочную панель, снова перезаписывая часть содержимого.

Это решило такие проблемы для меня

body { padding-top: 40px; }
@media screen and (max-width: 768px) {
    body { padding-top: 0px; }
}

Это делает заполнение 40px по умолчанию и 0px, когда ширина меньше 768px (что в соответствии с документацией bootstrap является отсечкой макета сотового телефона, где будет создан разрыв)

Ник Бисби
источник

1

Это решение также идет между ядром Bootstrap CSS и адаптивным импортом CSS? Я по-прежнему вижу разрыв, когда ширина окна меньше 980. Я предполагаю, что последующий импорт адаптивных переопределений CSS будет изменен. Если я перенесу это решение в режим адаптивного импорта CSS, то получу заполнение тела и дополнительную строку в строке меню.

ленивец

Я использую Twitter Bootstrap 2.3.2. Я заметил, что документ больше не содержит предложение 40px, хотя потребность все еще существует.

ленивец

1

Эх, предложение 40px все еще там, оно только что переместилось. Извините за комментарий спам.

ленивец

3

от Bootstrap 3. + body { padding-top: 40px; }достаточно

andilabs

8

Это решение на правильном пути. Простого помещения прокладки в корпус, как задокументировано, недостаточно даже на 3. +. С правильной комбинацией медиазапросов желаемый эффект может быть достигнут, поскольку панель навигации оборачивается изменением размера браузера. В моем случае мне нужно изменить отступы шириной 1148px, 900px и 768px.

Джон Макканн

34

гораздо более удобное решение для вашей справки, оно отлично работает во всех моих проектах:

измените свою первую строку с

.navbar.navbar-fixed-top

в

.navbar.navbar-default.navbar-static-top

catsky
источник

1

ты просто троллинг? или я что-то наблюдал?

Чино

Как это получило 10 голосов? navbar-default просто добавляет цвет и цвет фона ...

Денни Мюллер,

2

navbar-static-top - это изменение, и оно сработало для меня. Спасибо!

kevthanewversi

1

navbar-static-top исправил это и для меня. Наименее навязчивый.

xpagesbeast

3

Это работает, если вам не нужно, чтобы панель навигации всегда была видна в верхней части экрана. Navbar-static-top не исправлен, он прокручивается вместе с экраном. Это иллюстрирует различные стили navbar: getbootstrap.com/docs/3.3/examples/navbar-static-top

Виктор Ионеску

26

Эта проблема известна, и есть обходной путь на сайте начальной загрузки Twitter:

Когда вы прикрепляете навигационную панель, не забудьте учесть скрытую область под ней. Добавьте 40px или больше отступов к <body>. Обязательно добавьте это после основного Bootstrap CSS и до необязательного адаптивного CSS.

Это сработало для меня:

body { padding-top: 40px; }

davidrac
источник

9

Но когда вы минимизируете окно, после 40px появляется панель навигации, как мне с ней справиться ..

Аравиндхан

1

да, это решение не работает на экранах мобильных устройств. Фактически, в широкоэкранном режиме на моем телефоне это делает сайт бесполезным.

Тони Батгейт

какой дополнительный отзывчивый CSS? Я когда-либо использовал только один (основной) загрузочный CSS - я говорю выше версии 3.7.x UPWARDS; он был разделен на разные CSS до версии 3.7.x?

joedotnot

26

@ Райан, вы правы, жесткое кодирование высоты будет плохо работать в случае пользовательских панелей навигации. Это код, который я использую для BS 3.0.0 счастливо:

$(window).resize(function () { 
   $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});

$(window).load(function () { 
   $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);         
});

Арам Пароникян
источник

3

Вместо того, чтобы использовать parseIntв css значения высоты, я просто использовал $('#main-navbar').height(), но в остальном это было очень полезно и решило мою проблему, спасибо.

Tylerwal

Если ваша навигационная панель не имеет фиксированной высоты, это то, что вам нужно.

CraigP

21

Я положил это перед контейнером yield:

<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;">&nbsp;</div>

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

РЕДАКТИРОВАТЬ - это работает намного лучше:

@media (min-width: 980px) {
  body {
    padding-top: 60px;
    padding-bottom: 42px;
  }
}

Дэн
источник

16

Проблема заключается в navbar-fixed-top, который будет перекрывать ваш контент, если не указан body-padding. Ни одно из предложенных здесь решений не работает в 100% случаев. Решение JQuery мигает / сдвигает страницу после загрузки страницы, что выглядит странно.

Для меня реальным решением является не использование navbar-fixed-top, а navbar-static-top.

.navbar { margin-bottom:0px;} //for jumtron support, see http://stackoverflow.com/questions/23911242/gap-between-navbar-and-jumbotron

<nav class="navbar navbar-inverse navbar-static-top">
...
</nav>

Томас Кубес
источник

1

Да, это лучше, потому что заполнение тела является динамическим для каждого размера экрана, их решение не является хорошим.

Ронен Фестингер

Но затем есть полоса пустого белого пространства над панелью навигации.

user2075599

16

Как я уже писал в аналогичном вопросе, я добился большого успеха в создании фиктивной нефиксированной навигационной панели прямо перед моей настоящей фиксированной навигационной панелью.

<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
    <!-- Nav bar details -->
</nav>

Интервал отлично работает на всех размерах экрана.

Джейсон Батлер
источник

Это то, что мы делаем .. помещаем содержимое тела в правильное место без кода js, догадок или чего-либо еще. ,

FredArters

1

Тид заслуживает большего количества голосов, работает отлично, безобразно, но только код: D

JRsz

Спасибо, это гораздо более элегантное решение, чем верхнее заполнение или маржинальные пиксели и прочее ...

Педро Рейс

3

К сожалению, это не работает для мобильных устройств, когда навигация попадает в 1 столбец.

Педро Рейс

16

Решение для Bootstrap 4, оно отлично работает во всех моих проектах:

измените свою первую строку с

navbar-fixed-top

в

sticky-top

Ссылка на документацию по начальной загрузке

О времени они сделали это правильно: D

стог
источник

Некоторые люди могут использовать фиксированный верх, чтобы видеть ссылки при прокрутке страницы вниз; хотя эта функция может быть полезна, если вас это не волнует :)

Knowledge_is_power

Также обратите внимание, что .sticky-top использует position: sticky, которая поддерживается не во всех браузерах.

живи-люби

14

Все предыдущие решения тем или иным образом жестко кодируют 40 пикселей специально в HTML или CSS. Что, если навигационная панель содержит другой размер шрифта или изображение? Что делать , если у меня есть хорошая причина не возиться с телом дополнения в первую очередь? Я искал решение этой проблемы, и вот что я придумал:

$(document).ready(function(){
    $('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
    $(window).resize(function(){
        $('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
});

Вы можете переместить его вверх или вниз, отрегулировав «1». Кажется, это работает для меня независимо от размера содержимого в панели навигации, до и после изменения размера.

Мне интересно, что другие думают по этому поводу: пожалуйста, поделитесь своими мыслями. (Кстати, это будет рефакторинг, чтобы не повторяться.) Помимо использования jQuery, есть ли другие причины не подходить к проблеме таким образом? У меня даже есть это работает со вторым navbar, как это:

$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
        + $('.admin-nav').height() + 1 )+'px'});

PS: Выше приведен Bootstrap 2.3.2 - будет ли он работать в 3.x До тех пор, пока остаются общие имена классов ... фактически, он должен работать независимо от начальной загрузки, верно?

РЕДАКТИРОВАТЬ: Вот полная функция jquery, которая обрабатывает две сложенные, отзывчивые фиксированные панели навигации динамического размера. Требуются 3 HTML-класса (или могут использоваться идентификаторы): user-top, admin-top и contentwrap:

$(document).ready(function(){

    $('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
    $('.contentwrap') .css({'padding-top': (
        $('.user-top').height()
         + $('.admin-top').height()
         + 0 )+'px'
    });

    $(window).resize(function(){
        $('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
        $('.contentwrap') .css({'padding-top': (
            $('.user-top').height()
             + $('.admin-top').height()
             + 0 )+'px'
        });
});

Райан
источник

Просто к сведению, я использую это, и это прекрасно работает, но по какой-то странной причине, если у меня есть две панели навигации, один нормальный размер и один для маленьких экранов, он работает только на большем?

NaughtySquid

@LiamDawe, может быть, у вас есть более одного «.user-top» (например) на странице, в этом случае .height () может запутаться ...?

Райан

14

Просто поменяйте fixed-topс sticky-top. Таким образом, вам не придется рассчитывать отступы.
И это работает!

Шивам Агравал
источник

Also note that .sticky-top uses position: sticky, which isn’t fully supported in every browser.Смотрите - getbootstrap.com/docs/4.5/components/navbar/#placement

Абхилаш Кишоре

11

Для обработки строк переноса в строке меню примените идентификатор к панели навигации, например:

<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="topnavbar">

и добавьте этот небольшой скрипт в голову после включения jquery, например так:

<script>
    $(document).ready(function(){
        $(document.body).css('padding-top', $('#topnavbar').height() + 10);
        $(window).resize(function(){
            $(document.body).css('padding-top', $('#topnavbar').height() + 10);
        });
    });
</script>

Таким образом, верхний слой тела автоматически регулируется.

Оливер Кениг
источник

Мне пришлось изменить вторую ссылку на высоту в вашем примере, чтобы она была $ ('# topnavbar'). Height (), и тогда это отлично сработало для меня. Спасибо!

безжалостный

1

Спасибо за комментарий! Я исправил это в ответе.

Оливер Кениг

Это лучшее решение, которое мне встречалось, которое работает на ПК, iOS, Android - на всех устройствах. Все остальные либо имеют жестко запрограммированные значения пикселей, либо слишком длинные и не работают на всех устройствах.

Оракулярный мужчина

Хорошее решение. У меня были небольшие смещения, которые не учитывались при расчете. Я предполагаю, что это было, потому что у моей навигационной панели были некоторые поля. Я решил изменить вызов height () для вызова externalHeight (), чтобы принять это во внимание.

Леонардо Сантос

4

для Bootstrap 3. + я бы использовал следующий CSS для исправления navbar-fixed-top и проблемы с перекрытием перехода привязки на основе https://github.com/twbs/bootstrap/issues/1768

/* fix fixed-bar */
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
  body { padding-top: 40px; }
}

/* fix fixed-bar jumping to in-page anchor issue */
*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}

Gasolin
источник

Та же проблема, хороший ответ.

McGrady

2

использовать этот класс внутри тега nav

class = "navbar navbar-expand-lg navbar-light bg-light sticky-top "

Для начальной загрузки 4

Kynginthenorth
источник

Я никогда не узнаю, почему за него проголосовали, так как он работал на меня и всех остальных.

Kynginthenorth

Это верно. Единственная проблема заключается в том, что в документации говорится: «Утилита .sticky-top использует позицию CSS: sticky, которая поддерживается не во всех браузерах»

José

1

Все, что вам нужно сделать, это

@media (min-width: 980px) { body { padding-top: 40px; } }

Венкат Котра
источник

0

В дополнение к ответу Ника Бисби, если вы столкнулись с этой проблемой, используя HAML в рельсах, и применили исправление Роберто Барроса здесь:

Я заменил требование в "bootstrap_and_overrides.css" на:

= требуется twitter-bootstrap-static / bootstrap.css.erb

(См. Https://github.com/seyhunak/twitter-bootstrap-rails/issues/91 )

... вам нужно поместить тело CSS перед оператором require следующим образом:

@import "twitter/bootstrap/bootstrap";
body { padding-top: 40px; }
@import "twitter/bootstrap/responsive";
=require twitter-bootstrap-static/bootstrap.css.erb

Если оператор require находится перед телом CSS, он не вступит в силу.

danielmbarlow
источник

0

Я бы сделал это:

// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }

Это должно гарантировать, что блок навигации не растягивает страницу вниз и покрывает содержимое страницы.

developer10
источник

-4

Я просто завернул навигационную панель в

<div width="100%">
<div class="nav-? ??">
...
</nav>
</div>

Нет фантазии фокус-покус, но это сработало ..

TTbooster
источник

Ваш ответ неясен и не решает проблему. Что nav-? ??представляет?

fragilewindows

Twitter Bootstrap Navbar с фиксированным верхним перекрытием сайта

Ответы:

Обивка тела требуется