Bootstrap - navbar-fixed-top закрывает содержимое

У меня вопрос по поводу navbar-fixed-top. Ну, у меня с этим простая проблема. Моя фиксированная панель навигации закрывает контент, например, на странице «О нас», она закрывает строку с заголовком «О нас».

Я понятия не имею, как это исправить, потому что когда я изменяю размер веб-сайта (размер мобильного устройства), отображается заголовок.

Конечно, у меня такая проблема с заголовками на других страницах (Full Width и 404).

Кроме того, на странице указателя он охватывает некоторые слайдеры карусели.

Информация:

Дайте мне знать, как я могу исправить это на всех разрешениях.


twitter-bootstrap navbar fixed
person testerius    schedule 02.11.2013    source источник
comment
Ну никто не знает как исправить?   -  person testerius    schedule 02.11.2013
comment
есть несколько копий этой проблемы. stackoverflow.com/questions/11124777/ говорит, что добавьте этот css: body {padding-top: 40px; } @media screen и (max-width: 768px) {body {padding-top: 0px; }} ____________________________________________________________________ stackoverflow.com/questions/10336194/, это сработало для меня: для начальной загрузки 3 navbar-static-top вместо fixed предотвращает эту проблему, если вам не нужно, чтобы панель навигации всегда была видна   -  person TW Scannell    schedule 18.11.2013

Ответы (6)


arrow_upward
21
arrow_downward

ответ находится на странице:

Twitter Bootstrap - верхняя панель навигации блокирует верхний контент страницы

Добавьте в свой CSS:

body { 
    padding-top: 65px; 
}

или более сложное решение, но отзывчивое, если ваша навигационная панель меняет высоту (например, в таблетках отображается больше до 60 пикселей; или другое), используйте смешанное решение с css и javascript

CSS:

    #godown{
   height: 60px;
}

HTML (резюме)

<body>
<nav class="navbar navbar-fixed-top " role="navigation" id="navMenu">
...

</nav>

<!-- This div make the magic :) -->

<div class="godown-60" id="godown"></div>

<!-- the rest of your site -->
...

JAVASCRIPT:

<script>
//insert this in your jquery
//control the resizing of menu and go down the content in the correct position

    $("#navMenu").resize(function () {
        $('#godown').height($("#navMenu").height() + 10);
    });

    if ($("#navMenu").height() > $('#godown').height()) $('#godown').height($("#navMenu").height() + 10);

</script>
person chefjuanpi    schedule 26.08.2014
comment
Сработало для меня, но кажется таким хакерским. - person John Slavick; 09.10.2014

arrow_upward
10
arrow_downward

Попробуйте class = "navbar-static-top". Он по-прежнему позволяет панели навигации оставаться наверху, но не блокирует контент.

person Antonio Jha    schedule 23.09.2014
comment
Да, но он останавливает эффект залипания, поэтому при прокрутке вниз вы теряете панель навигации. - person rory; 13.09.2016
comment
Спасибо! Это сработало, но да, вы можете ожидать, что потеряете постоянную липкую функцию навигации. - person Levi Maes; 06.04.2018

arrow_upward
3
arrow_downward

position: sticky вместо position: static помогли мне.

person yay    schedule 15.12.2018

arrow_upward
0
arrow_downward

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

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

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

person developer10    schedule 30.04.2015
comment
На самом деле не исправление. Навигационные блоки ДЕЙСТВИТЕЛЬНО меняются. Вы не хотите останавливать это. - person RichieHH; 20.09.2017

arrow_upward
0
arrow_downward

Просто добавьте идентификатор или класс к содержимому, а затем установите для него верхний край, достаточный, чтобы содержимое отображалось без помех статической навигационной панели, и добавьте атрибут "! Important", чтобы он работал ...

person DamiCode    schedule 18.04.2019

arrow_upward
0
arrow_downward

Возможно, установка переменной для paddingTop тела на высоту навигационной панели также может работать и, следовательно, будет немного более отзывчивой, чем фиксированное значение 60/65 пикселей.

let padding = $("nav").height() + "px";

Практическим примером является кнопка Bootstrap .navbar-toogler и добавление к ней события щелчка и функция setTimeout, которая позволяет изменять высоту, а затем применяет новое значение как paddingTop к телу.

jQuery:

$(".navbar-toggler").click(function(){
            setTimeout(function(){
                let padding = $("nav").height() + "px";
                $("body").css("paddingTop", padding)
            }, 500)
        })

vanillaJS:

document.querySelector(".navbar-toggler").onclick = function(){
            setTimeout(function(){
                let padding = document.querySelector("nav").offsetHeight + "px";
                document.body.style.paddingTop=padding;
            }, 500)
        };
person Max Pietrzak    schedule 25.11.2020