

Navbar - это простая оболочка для размещения логотипа, навигации и других основных элементов в заголовке страницы. Этот объект так же называют шапкой страницы или хидером (англ. header).
Давайте рассмотрим простейшую реализацию navbar в Bootstrap 4:
<nav class="navbar navbar-expand-sm navbar-light bg-faded"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Logo</a> <div class="collapse navbar-collapse" id="nav-content"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </div> </nav>
Разберем этот код подробнее:
- Оберните все внутри элемента nav классом .navbar и классом .navbar-expand {-sm | -md | -lg | -xl} вместе с цветовой схемой.
- Для скрытия и открытия меню на небольших устройствах используйте элемент кнопки с классом .navbar-toggler. Чтобы отобразить «гамбургер» (кнопка открытия/скрытия меню), используйте класс .navbar-toggler-icon для элемента span.
- Для вывода списка ссылок используйте ul с классом .navbar-nav.
- Для каждого отдельного элемента списка используйте тег li с .nav-item.
- Для отдельных ссылок используйте .nav-link.
Navbar с выпадающим меню
Вы можете добавить выпадающие меню на панель навигации navbar. Просто добавьте выпадающее меню в элемент li с примененным классом .dropdown.
<nav class="navbar navbar-expand-sm navbar-light bg-faded"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Logo</a> <div class="collapse navbar-collapse" id="nav-content"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu" aria-labelledby="Preview"> <a class="dropdown-item" href="#">Dropdown Link 1</a> <a class="dropdown-item" href="#">Dropdown Link 2</a> <a class="dropdown-item" href="#">Dropdown Link 3</a> </div> </li> </ul> </div> </nav>
Формы в navbar
Вы можете добавить элементы формы в панель навигации navbar, добавив .form-inline к тегу формы. Для того, чтобы форма была расположена в правой части шапки, добавьте класс .mr-auto:
<nav class="navbar navbar-expand-sm navbar-light bg-faded"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Logo</a> <div class="collapse navbar-collapse" id="nav-content"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> </ul> <form class="form-inline" role="search"> <input type="text" class="form-control"> <button type="submit" class="btn btn-secondary">Search</button> </form> </div> </nav>
Цвет фона navbar
Bootstrap предоставляет различные опции для добавления цвета на панель навигации navbar. Это работает так: вы указываете тип, светлый или темный (через .navbar-light или .navbar-dark), а затем указываете цвет фона. Цвет можно указать либо с помощью одного из классов цвета Bootstrap (например, .bg-primary, .bg-dark), либо указав свой собственный цвет с помощью CSS (например, используя background-color).
Navbar с основным цветом фона и светлым текстом
В этом примере мы используем .bg-primary вместе с .navbar-dark:
<nav class="navbar navbar-expand-sm navbar-dark bg-primary"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Logo</a> <div class="collapse navbar-collapse" id="nav-content"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </div> </nav>
Кастомный (пользовательский) цвет меню navbar
Чтобы указать свой собственный цвет фона меню navbar, удалите любой класс .bg-* (например, удалите .bg-primary) и добавьте свой собственный цвет с помощью CSS.
<nav class="navbar navbar-expand-sm navbar-dark" style="background: coral;"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Logo</a> <div class="collapse navbar-collapse" id="nav-content"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </div> </nav>
Фиксированное позиционирование navbar
Вы можете закрепить панель навигации вверху или внизу окна просмотра, используя .fixed-top или .fixed-bottom.
Пример navbar зафиксированного в верхней части экрана:
<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Logo</a> <div class="collapse navbar-collapse" id="nav-content"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </div> </nav>
При использовании фиксированных панелей навигации вам обычно нужно добавить отступы к телу документа, чтобы компенсировать высоту панели навигации (в противном случае панель навигации будет скрывать ваш контент).
Например, для navbar который зафиксирован в верхней части документа, используйте следующие стили css:
body { padding-top: 70px; }
Они «отодвинут» весь контент сайта вниз на 70 пикселей и navbar не будет перекрывать его.



Замечательные статьи, попробовал первую конструкцию «navbar в Bootstrap 4» всё замечательно, только работает криво, при изменении разрешения, Гамбургер появляется, тексты ссылок скрываются, но стоит нажать на Гамбургер, тексты ссылок опять появляются, и сам Гамбургер сдвигается вправо, т.е. само меню при клике не раскрывается вниз. Джумла 3.10.2 Шаблон Helix Ultimate 2.05. Перепроверил все классы присвоились верно.