Bootstrap 4 Несколько фиксированных верхней панели навигации

Возможно ли, чтобы в Bootstrap 4 несколько панелей навигации с фиксированным верхом отображались друг под другом?

1 в настоящее время перекрывает другой, чего я не хочу.


person Byron Daries    schedule 23.02.2017    source источник
comment
Удален тег для заголовка   -  person Barry Michael Doyle    schedule 25.02.2017


Ответы (2)


Да, это возможно, но вы должны соответственно расположить вторую. Высота панели навигации ~ 56 пикселей.

.fixed-top-2 {
    margin-top: 56px;
}

body {
    padding-top: 105px;
}

<nav class="navbar navbar-toggleable-sm bg-faded navbar-light fixed-top fixed-top-2">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a href="/" class="navbar-brand">One</a>
    <div class="navbar-collapse collapse" id="navbar1">
        <ul class="navbar-nav">
            ..
        </ul>
    </div>
</nav>

<nav class="navbar navbar-toggleable-sm bg-inverse navbar-inverse fixed-top">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a href="/" class="navbar-brand">Two</a>
    <div class="navbar-collapse collapse" id="navbar2">
        <ul class="navbar-nav">
            ..
        </ul>
    </div>
</nav>

Демо: Bootstrap 4 Несколько фиксированных панелей навигации

В некоторых сценариях может быть лучше использовать одиночный fixed-top DIV, содержащий и то, и другое.

См. Также:
Bootstrap 4 Navbar прикрепляется после заголовка
Bootstrap 4 сворачивает две панели навигации в одну кнопку переключения

person Zim    schedule 23.02.2017
comment
Для меня это загружает. Я тоже разместил код в вопросе. - person Zim; 13.05.2017
comment
Эта прикрепленная после заголовка ссылка, которую вы разместили, - это именно то, что я искал, но я не смог выразить ее словами. Бесконечно благодарен! - person Neville; 24.10.2018

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

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

padding-top создаст отступ до того, как попадет в верхнюю панель навигации, когда это необходимо.

Посмотреть здесь:

https://www.codeply.com/p/sIIXzlAW3V

person madav    schedule 03.02.2020
comment
Спасибо за хороший пример. Но попробуйте посмотреть на это в режиме мобильного телефона и нажмите кнопку в верхнем меню. - person Demiurg; 11.08.2020
comment
@Demiurg Спасибо, что заметили это! Придется поиграть с ним, чтобы ли было наверху. - person madav; 16.08.2020