Bootstrap 3 - Navbar (горизонтальное меню)

Александр Мальцев
325K
6
Bootstrap 3 - Navbar (горизонтальное меню)
Содержание:
  1. Как в Bootstrap создать горизонтальное адаптивное меню
  2. Фиксированное (плавающее) меню
  3. Неподвижное верхнее горизонтальное меню
  4. Меню, имеющее тёмные цвета
  5. Как изменить точку переключения navbar
  6. Как зафиксировать меню при прокрутке
  7. Bootstrap Navbar - Анимация кнопки меню
  8. Изменение максимальной высоты collapsed блока
  9. Горизонтальное меню для навигации по странице
  10. Navbar - Открытие dropdown меню при наведении
  11. Установка активного пункта меню с помощью JavaScript
  12. Изменение высоты Navbar
  13. Комментарии

В этой статье вы узнаете, как в Bootstrap 3 осуществляется создание главного (основного) горизонтального меню для сайта.

Как в Bootstrap создать горизонтальное адаптивное меню

Создание горизонтального адаптивного меню для сайта в Bootstrap осуществляется с помощью компонента Navbar.

Navbar имеет 2 режима отображения:

  • десктопный (обычный) – выводятся все элементы меню;
  • мобильный (свёрнутый) – по умолчанию отображается бренд и кнопка «Гамбургер» (для открытия основного содержимого меню).
Десктопный вид меню Navbar (по умолчанию при ширине viewport >=768px)
Десктопный вид меню Bootstrap Navbar
Мобильный вид горизонтального меню Navbar
Мобильный вид горизонтального меню Bootstrap Navbar
Мобильный вид открытого горизонтального меню Navbar
Мобильный вид открытого горизонтального меню Bootstrap Navbar

Режим отображения меню зависит от ширины viewport браузера. По умолчанию меню Navbar имеет мобильный вид при ширине viewport меньше 768px.

Демонстрация компонента Navbar

Описание меню Navbar

Меню Navbar состоит из:

  • заголовка navbar-header (кнопки «Гамбургер» и бренда);
  • основной части (места для размещения ссылок, кнопок, форм и других элементов).

HTML-структура Bootstrap меню Navbar (без поддержки вспомогательных технологий):

<!-- Классы navbar и navbar-default (базовые классы меню) -->
<nav class="navbar navbar-default">
  <!-- Контейнер (определяет ширину Navbar) -->
  <div class="container-fluid">
    <!-- Заголовок -->
    <div class="navbar-header">
      <!-- Кнопка «Гамбургер» отображается только в мобильном виде (предназначена для открытия основного содержимого Navbar) -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- Бренд или название сайта (отображается в левой части меню) -->
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <!-- Основная часть меню (может содержать ссылки, формы и другие элементы) -->
    <div class="collapse navbar-collapse" id="navbar-main">
      <!-- Содержимое основной части -->
    </div>
  </div>
</nav>

Работа с меню в основном заключается в наполнении её содержимого (элемента с классом navbar-collapse).

Добавление в меню ссылок и выпадающего списка

Добавление ссылок в меню осуществляется следующим образом:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Заголовок -->
    <div class="navbar-header">
      ...
    </div>
    <!-- Основная часть меню (может содержать ссылки, формы и другие элементы) -->
    <div class="collapse navbar-collapse" id="navbar-main">
      <!-- Содержимое основной части -->

      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Ссылка 1</a></li>
        <li><a href="#">Ссылка 2</a></li>
        <li><a href="#">Ссылка 3</a></li>
        <li><a href="#">Ссылка 4</a></li>
        <li><a href="#">Ссылка 5</a></li>
      </ul>
      
    </div>
  </div>
</nav>

Класс active предназначен для подсвечивания активного пункта меню.

Добавление выпадающего списка в меню:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Заголовок -->
    <div class="navbar-header">
      ...
    </div>
    <!-- Основная часть меню (может содержать ссылки, формы и другие элементы) -->
    <div class="collapse navbar-collapse" id="navbar-main">
      <!-- Содержимое основной части -->

      <ul class="nav navbar-nav">
      
        <!-- Ссылки -->        
        <li class="active"><a href="#">Ссылка 1</a></li>
        <li><a href="#">Ссылка 2</a></li>
        <li><a href="#">Ссылка 3</a></li>
        <li><a href="#">Ссылка 4</a></li>
        <li><a href="#">Ссылка 5</a></li>

        <!-- Выпадающий список -->
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Раздел <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Ссылка</a></li>
            <li><a href="#">Ссылка</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Ссылка</a></li>
          </ul>
        </li>

      </ul>
      
    </div>
  </div>
</nav>

Добавления разделителя между пунктами в выпадающем меню осуществляется посредством добавления элемента li с классом divider:

<li role="separator" class="divider"></li>  

Добавим в меню ещё блок, содержащий ссылку и выпадающий список, но расположенный справа:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Заголовок -->
    <div class="navbar-header">
      ...
    </div>
    <!-- Основная часть меню (может содержать ссылки, формы и другие элементы) -->
    <div class="collapse navbar-collapse" id="navbar-main">
      <!-- Содержимое основной части -->

      <ul class="nav navbar-nav">
        ...
      </ul>

      <!-- Блок, расположенный справа -->
      <ul class="nav navbar-nav navbar-right">
        <!-- Ссылка -->        
        <li><a href="#">Ссылка</a></li>
          <!-- Выпадающий список -->
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Раздел <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Ссылка</a></li>
            <li><a href="#">Ссылка</a></li>
          </ul>
        </li>
      </ul>

    </div>
  </div>
</nav>

Кнопка «Гамбургер» отображается только в мобильной версии и предназначена для открытия основной части меню. Указание элемента (основной части) осуществляется посредством атрибута data-target.

Значение атрибута data-target кнопки "Гамбургер" должно указывать на элемент, представляющий собой основной контент горизонтального меню Bootstrap Navbar
Значение атрибута data-target кнопки

Кроме атрибута data-target и связанным с ним id, в меню Navbar используются и много других сущностей. Они играют роль селекторов, с помощью которых к элементам меню добавляются стили (CSS) и логика (JavaScript).

Например, у кнопки «Гамбургер» атрибут data-toggle="collapse" предназначен для того, чтобы JavaScript его инициализировал как Collapse. После инициализации эта кнопка может переключать видимость элемента, указанного в data-target.

Кроме этого, JavaScript, в зависимости от состояния меню, добавляет и к другим элементам различные классы.

Один из этих классов – это collapsed. Он присутствует у кнопки «Гамбургер», когда меню находится в свёрнутом (не в открытом) состоянии.

Для элемента, в котором отображается основной контент, логика JavaScript устанавливает определённый класс (классы) из следующего списка:

  • collapse (скрыт);
  • collapsing (находится в процессе открытия или закрытия);
  • collapse и in (открыт).

Поддержка вспомогательных технологий

HTML-структура Bootstrap меню Navbar с поддержкой вспомогательных технологий:

<!-- Классы navbar и navbar-default -->
<nav class="navbar navbar-default">
  <!-- Контейнер -->
  <div class="container-fluid">
    <!-- Заголовок -->
    <div class="navbar-header">
      <!-- Кнопка «Гамбургер» -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main" aria-expanded="false">
        <span class=sr-only>Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- Бренд или название сайта -->
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <!-- Основная часть меню -->
    <div class="collapse navbar-collapse" id="navbar-main">
    
      <!-- Содержимое основной части -->
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Ссылка 1 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Ссылка 2</a></li>
        <li><a href="#">Ссылка 3</a></li>
        <li><a href="#">Ссылка 4</a></li>
        <li><a href="#">Ссылка 5</a></li>
        <!-- Выпадающий список -->
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Раздел <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Ссылка</a></li>
            <li><a href="#">Ссылка</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Ссылка</a></li>
          </ul>
        </li>
      </ul>
      
    </div>
  </div>
</nav>

В вышеприведённом примере разметка блока Navbar представлена с использованием ARIA атрибутов и класса sr-only. Данные сущности предназначены для того, чтобы сделать горизонтальное меню более доступным для программ чтения экрана.

Класс sr-only предназначен для скрытия контента на всех устройствах, кроме программ Screen Readers. Т.е. содержимое нижеприведённых элементов будет доступно только им:

<span class="sr-only">Toggle navigation</span>
<span class="sr-only">(current)</span>

При чтении HTML страницы пользователь не поймёт что это за элемент, если к нему не добавить поясняющий текст. Например, фраза Toggle Navigation поясняет, что с помощью этого элемента осуществляется переключение навигации.

Кстати, если ваша аудитория является русскоговорящей и пользователь не знает английского языка, то он и в этом случае может не понять назначение элемента.

Поэтому для русскоговорящей аудитории текст желательно указывать так:

<span class="sr-only">Кнопка, для переключения навигации</span>
<span class="sr-only">(текущая)</span>

Атрибут role предназначен для того, чтобы указать назначение того или иного элемента:

  • role="navigation" – содержит навигацию;
  • role="button" – элемент, на который можно кликнуть.

Атрибуты, начинающиеся с aria, предназначены для описания элементов и их состояния:

  • aria-expanded – сообщает, развёрнут или свёрнут элемент;
  • aria-haspopup – сообщает, что элемент имеет подменю или контекстное меню.

Если вам не нужна поддержка вспомогательных технологий, то данные сущности при создании меню можно не использовать.

Использование в качестве бренда изображения

В качестве бренда можно использовать не только текст, но и изображение (img).

<a class="navbar-brand" href="/">
  <img src="navbar-brand.svg" height="36" alt="Название бренда или сайта">
</a>

При установке изображения придётся немного подкорректировать класс navbar-brand. А именно в зависимости от высоты изображения изменить значение padding отступов.

Например, для изображения, имеющего высоту 36px, в качестве значений отступов padding-top и padding-bottom необходимо установить следующее:

/* 50px - 36px = 14px
   14px / 2 = 7px
   50px - высота меню Navbar по умолчанию */
.navbar-brand {
  padding-top: 7px;
  padding-bottom: 7px;
}

Вставка формы в меню

Помещение формы в меню осуществляется посредством добавления к ней класса navbar-form:

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>  

Класс navbar-form необходим для того, чтобы обеспечить правильное позиционирование формы внутри меню.

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

Вставка кнопки в меню

Вставка в меню кнопки, расположенной вне формы, осуществляется посредством добавления к ней дополнительного класса navbar-btn.

<button type="button" class="btn btn-default navbar-btn">Войти</button>

Класс navbar-btn может применяться к элементам a и input.

Вставка текста в меню

Для того чтобы в меню поместить некоторый текст, его необходимо обернуть с помощью элемента p и добавить к нему класс navbar-text.

<p class="navbar-text">Вошли как Тимофей</p>

Ссылки вне элемента nav

Для использования стандартных ссылок вне специально предназначенного для этого элемента, к ним необходимо добавить класс navbar-link.

<p class="navbar-text navbar-right">Вошли как <a href="#" class="navbar-link">Тимофей;/a></p>

Выравнивание элементов внутри меню

Выравнивание ссылок, форм, кнопок и текста в меню осуществляется с помощью добавления к ним класса navbar-left или navbar-right. Эти классы выравнивают элемент соответственно по левому или по правому краю. Осуществляют они это действие посредством установки элементу CSS-свойства float со значением left или right.

В отличие от классов pull-left и pull-right, они делают это только для десктопной версии горизонтального меню Navbar.

Например, для того чтобы выровнять группу гиперссылок в меню по правому краю, к элементу ul необходимо добавить класс navbar-right:

<ul class="nav navbar-nav navbar-right">
  ...
</ul>

Управление видимостью элементов меню на устройствах

В Bootstrap 3 имеется набор адаптивных классов (например, hidden-xs, hidden-sm, hidden-md, hidden-lg), с помощью которых можно очень просто скрыть отображения элемента на определённых устройствах.

Например, скроем отображения элемента в меню на маленьких (sm) и средних (md) экранах.

<ul class="nav navbar-nav navbar-right hidden-sm hidden-md">
  <li><a href="#">Ссылка 6</a></li>
  <li><a href="#">Ссылка 7</a></li>
</ul>

Фиксированное (плавающее) меню

Bootstrap 3 предоставляет классы, с помощью которых вы можете прикрепить (зафиксировать) меню при прокрутке странице к её верхней или нижней части.

Прикрепление к верхней части страницы

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

<!-- Класс navbar-fixed-top прикрепляет меню к верхней части страницы -->
<nav class="navbar navbar-default navbar-fixed-top">
  <!-- Элемент с классом container или container-fluid необходим для центрирования и установки необходимых отступов слева и справа для контента -->
  <div class="container">
    ...
  </div>
</nav>

Содержимое горизонтального меню помещайте внутрь контейнера с классом container или container-fluid. Это обеспечит центрирование меню и установку необходимых отступов слева и справа для его контента.

Для того чтобы верхнее фиксированное меню не накладывалась на контент страницы необходимо для элемента body добавить CSS свойство padding-top (высота меню Navbar по умолчанию равна 50px):

body {
  padding-top: 70px;
}

Данное правило необходимо включить в свой файл CSS. Этот файл должен быть подключен после Bootstrap CSS.

Кроме этого, из-за того что у нас основной контент сдвинут, переход к определённому месту страницы, посредством якоря, будет выполняться не корректно. Чтобы это исправить, в CSS необходимо добавить следующий код:

:target:before { 
  display: block; 
  content: " "; 
  margin-top: -70px; 
  height: 70px; 
  visibility: hidden; 
}

Меню, прикрепленное к нижней части страницы

Прикрепление меню к нижней части страницы осуществляется посредством добавления к нему дополнительного класса navbar-fixed-bottom.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

Чтобы нижнее фиксированное меню не накладывалась на контент страницы необходимо для элемента body добавить следующее CSS правило:

body {
  padding-bottom: 70px;
}

Неподвижное верхнее горизонтальное меню

При расположении обычного (прокручиваемого) меню в верхней части страницы к нему желательно добавить класс navbar-static-top.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

Данный класс (navbar-static-top) :

  • убирает радиусы (border-radius: 0);
  • удаляет левую, правую и верхнюю границу у меню (border-width: 0 0 1px).

Меню, имеющее тёмные цвета

Фреймворк Bootstrap предоставляет класс navbar-inverse, с помощью которого вы можете установить меню тёмный стиль (инвертированный по отношению к navbar-default).

<nav class="navbar navbar-inverse">
  ...
</nav>
Горизонтальное меню Bootstrap в тёмном стиле
Горизонтальное меню Bootstrap в тёмном стиле

Как изменить точку переключения navbar

Самый простой способ изменить точку переключения (значение переменной @grid-float-breakpoint) – это создать свою сборку Bootstrap на странице Customize.

Установка в качестве точки переключения меню Navbar значения 900px
Установка в качестве точки переключения меню Navbar значения 900px

Способ изменения точки схлопывания меню с помощью CSS (без создания своей сборки):

@media (max-width: 899px) {
  .navbar-header {
    float: none;
  }
  .navbar-left,.navbar-right {
    float: none !important;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
    display: none!important;
  }
  .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .collapse.in{
    display:block !important;
  }
  .container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
    margin-right: -15px;
    margin-left: -15px;
  }
}  

Для того чтобы создать не схлопывающееся меню можно воспользоваться вышеприведённым решением, но назначить в качестве значения переменной @grid-float-breakpoint значение 320px (минимальную ширину экрана устройства).

Как зафиксировать меню при прокрутке

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

<body>
  <!-- Блок до меню Navbar (например, логотип) -->
  <div style="height: 90px;">...</div> 
  <!-- Горизонтальное меню Navbar -->
  <nav class="navbar navbar-default navbar-static-top" style="position: -webkit-sticky; position: sticky; top: 0;">
    ...
  </nav>
</body>

Но данное решение не работает в браузерах IE и Edge. Если нужна их поддержка всех браузеров, то можно воспользоваться плагином Bootstrap 3 Affix.

<body>
  <!-- Блок до меню Navbar (например, логотип) -->
  <div style="height: 90px;">...</div> 
  <!-- Горизонтальное меню Navbar -->
  <nav class="navbar navbar-default navbar-static-top" data-spy="affix" data-offset-top="90">
    ...
  </nav>
</body>
CSS (стили для откреплённого меню, т.е. находящегося в состоянии affix):
.navbar.affix {
  top:0;
  width:100%;
}

Bootstrap Navbar - Анимация кнопки меню

Примеры кода, с помощью которых вы можете «оживить» кнопку «Гамбургер».

1 вариант (анимация в иконку закрытия):

.navbar-toggle {
  border: none;
  background: transparent !important;
}
.navbar-toggle:hover {
  background: transparent !important;
}
.navbar-toggle .icon-bar {
  width: 22px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.navbar-toggle .icon-bar:nth-of-type(1) {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 10% 10%;
  -ms-transform-origin: 10% 10%;
  transform-origin: 10% 10%;
}
.navbar-toggle .icon-bar:nth-of-type(2) {
  opacity: 0;
  filter: alpha(opacity=0);
}
.navbar-toggle .icon-bar:nth-of-type(3) {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 10% 90%;
  -ms-transform-origin: 10% 90%;
  transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(1) {
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(2) {
  opacity: 1;
  filter: alpha(opacity=100);
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(3) {
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
}

2 вариант (анимация в стрелочку, направленную вверх):

.navbar-toggle {
  border: none;
  background: transparent !important;
}
.navbar-toggle:hover {
  background: transparent !important;
}
.navbar-toggle .icon-bar {
  width: 22px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(1) {
  transform: translate3d(0,0,0) rotate(0deg);
  width: 22px;
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(2) {
  transform: translate3d(0,0,0) rotate(0deg);
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(3) {
  transform: translate3d(0,0,0) rotate(0deg);
  width: 22px;
}
.navbar-toggle .icon-bar:nth-of-type(1) {
  transform: translate3d(1px,0,0) rotate(-45deg);
  transform-origin: center center;
  width: 11px;
}
.navbar-toggle .icon-bar:nth-of-type(2) {
  transform: rotate(-90deg);
  transform-origin: center center;
}
.navbar-toggle .icon-bar:nth-of-type(3) {
  transform: translate3d(0px,-14px,0) rotate(-135deg);
  transform-origin: right top;
  width: 11px;
}

Изменение максимальной высоты collapsed блока

В Bootstrap 3 по умолчанию максимальная высота выпадающего (collapsed) блока (в мобильном виде) равна 340px.

.navbar-collapse {
  max-height: 340px;
}

Если вы хотите данное значение устанавливать динамически, т.е. в зависимости от высоты устройства, то можно воспользоваться следующим скриптом (для верхнего фиксированного меню Navbar):

$(function() {
  $('.navbar-collapse').css({ 
    maxHeight: $(window).height() - $('.navbar-header').height() + 'px'
  });
});

Если необходимо с учётом возможного изменения экрана, то так:

$(function() {
  var changeHeightNavbarCollapse = function() {
    $('.navbar-collapse').css({ 
      maxHeight: $(window).height() - $('.navbar-header').height() + 'px'
    });
  };

  changeHeightNavbarCollapse();

  $(window).resize(function() {
    if (window.innerWidth <= 768) {
      changeHeightNavbarCollapse();
    }
  });

});

Пример, как collapsed блок можно развернуть на всю высоту устройства (для верхнего фиксированного меню Navbar):

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      ...
    </div>
    <div class="collapse navbar-collapse" id="navbar-main">
      <!-- имеет margin-top и margin-bottom, равные 7.5px -->
      <ul class="nav navbar-nav">
        ...
      </ul>
    </div>
  </div>
</nav>
...
<script>
$(function(){
  var changeHeightNavbarCollapse = function() {
    if (window.innerWidth < 768) {
      $('.navbar-collapse').css({ 
        maxHeight: $(window).height() - $('.navbar-header').height() + 'px' 
      });
      $('.navbar-collapse .navbar-nav').css({ 
        height: $(window).height() - $('.navbar-header').height() - 16 + 'px'
      });
    } else {
      $('.navbar-collapse .navbar-nav').css({ 
        height: 'auto'
      });  
    }
  };
  changeHeightNavbarCollapse();
  $(window).resize(function(){
    changeHeightNavbarCollapse();
  });
});
</script>

Горизонтальное меню для навигации по странице

Пример создания меню для одностраничного сайта с подсветкой текущего пункта (с использованием компонента ScrollSpy):

<body data-spy="scroll" data-target="#navbar-main" data-offset="90" style="padding-top:70px;">

  <!—Фиксированное горизонтальное меню для навигации по текущей странице -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main" aria-expanded="false">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
      </div>
      <div class="collapse navbar-collapse" id="navbar-main">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#href1">Ссылка 1 <span class="sr-only">(current)</span></a></li>
          <li><a href="#href2">Ссылка 2</a></li>
          <li><a href="#href3">Ссылка 3</a></li>
          <li><a href="#href4">Ссылка 4</a></li>
          <li><a href="#href5">Ссылка 5</a></li>
        </ul>
      </div>
    </div>
  </nav>
  
  <!--Основной контент страницы -->
  <main>
    <div class="container-fluid">
      ...
      <h1>Название страницы</h1>
      ...
      <h2 id="href1">Заголовок 1</h2>
      ...
      <h2 id="href2">Заголовок 2</h2>
      ...
      <h2 id="href3">Заголовок 3</h2>
      ...
      <h2 id="href4">Заголовок 4</h2>
      ...
      <h2 id="href5">Заголовок 5</h2>
      ...
    </div>    
  </main>
  ...
</body>

Дополнительно на страницу необходимо ещё поместить скрипт, который будет в мобильном виде при нажатии на ссылку закрывать collapsed блок:

//при нажатии на ссылку
$(".navbar-collapse a").click(function() {
  //если она не имеет класс dropdown-toggle
  if (!$(this).hasClass("dropdown-toggle")) {
    //то закрыть меню
    $(".navbar-collapse").collapse('hide');
  }
});

Сценарий JavaScript, с помощью которого можно изменить способ открытия выпадающих списков в десктопной версии меню Navbar (при наведении):

$(function() {
  function onNavbar() {
    if (window.innerWidth >= 768) {
      $('.navbar-default .dropdown').on('mouseover', function(){
        $('.dropdown-toggle', this).next('.dropdown-menu').show();
      }).on('mouseout', function(){
        $('.dropdown-toggle', this).next('.dropdown-menu').hide();
      });
      $('.dropdown-toggle').click(function() {
        if ($(this).next('.dropdown-menu').is(':visible')) {
          window.location = $(this).attr('href');
        }
      });
    } else {
      $('.navbar-default .dropdown').off('mouseover').off('mouseout');
    }
  }
  $(window).resize(function() {
    onNavbar();
  });
  onNavbar();
});

Установка активного пункта меню с помощью JavaScript

Подсветку активного пункта (установку ему класса active) можно выполнять не только на стороне сервера, но и на клиенте (в браузере) с помощью следующего сценария JavaScript:

$(function() {
  // путь текущей страницы
  var pathPage = location.pathname.slice(1);
  var parentUl = $('.navbar-nav a[href*='+pathPage']').closest('li').addClass('active').parent('ul');
  if (parent.closest('.navbar-nav li').length) {
    parentUl.closest('li').addClass('active');
  }
});

Изменение высоты Navbar

Наиболее простой способ изменить высоту – это собрать свою сборку (например, на странице Bootstrap Customize). За высоту меню Navbar отвечает переменная @navbar-height.

Другой вариант – это переопределить существующие стили (CSS):

.navbar {
  min-height: 80px;
}
.navbar-brand {
  padding: 0 15px;
  height: 80px;
  line-height: 80px;
}
.navbar-toggle {
  /* (80px - высота кнопки 34px) / 2 = 23px */
  margin-top: 23px;
  padding: 9px 10px !important;
}
@media (min-width: 768px) {
  .navbar-nav > li > a {
    /* (80px - line-height 27px) / 2 = 26.5px */
    padding-top: 26.5px;
    padding-bottom: 26.5px;
    line-height: 27px;
  }
}

Статьи, связанные с этой темой:

Комментарии ()

  1. Дмитрий
    24 марта 2021, 15:46
    Здравствуйте! Понравилось ваше меню зеленого цвета, особенно когда в мобильнике можно прокрутить в право. Искал на вашем сайте информацию, но не нашел. Подскажите пжл может, у вас есть статья про меню со скроллингом на мобильных. Буду очень благодарен, если поможете!
    1. Александр Мальцев
      24 марта 2021, 16:07
      Привет! Такого материала нет. Если он нужен, то напишу статью на эту тему.
      1. Дмитрий
        3 минуты назад
        Да нужен, будет очень полезная информация.
    2. simha
      01 июня 2020, 22:00
      Здравствуйте!
      Спасибо Вам большое за уроки!
      Не могли бы Вы подсказать? Есть меню на Bootstrap. Со временем возникла необходимость увеличить количество пунктов меню; но в одну строку они не помещаются, и меню съезжает под логотип. Нельзя ли сделать так, чтобы пункты меню располагались в 2 строки справа от логотипа? Спасибо!

      <nav class="navbar navbar-default bootsnav">
                 <div class="container">
                     <div class="navbar-header">
                          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
                              <i class="fa fa-bars"></i>
                          </button>
                          <a class="navbar-brand" href="index.html">
                              <img src="assets/img/logo.jpg" class="logo" alt="логотип">
                          </a>
                      </div>
                         <div class="collapse navbar-collapse" id="navbar-menu">
                          <ul class="nav navbar-nav navbar-left">
                             <li><a href="">Ссылка 1</a></li> 
                                   <li>
                                  <a href="">Ссылка 2</a>
                              </li> 
                          <li>   <a href="">Ссылка 3</a> </li> 
                           <li>
                                  <a href=""> Ссылка 4</a>
                              </li> 
                           <li>
                                  <a href="">Ссылка 5</a>
                              </li> 
                              
                                 <li><a href="">Ссылка 6</a>    </li> 
                                      <li>
                                  <a href="">Ссылка 7</a>
                              </li> 
                                 <li>
                                  <a href="">Ссылка 8</a>
                              </li> 
                              <li>
                                  <a href="">Ссылка 9
                                  </a>
                              </li> 
                              <li><a href="">Ссылка 10</a>
                              </li>
                          </ul>
                      </div>
                  </div>
      
              </nav>
      1. Александр Мальцев
        02 июня 2020, 13:31
        Здравствуйте! Оно так организовано, и чтобы его изменить под это описание, в нём придётся много чего переделывать. На мой взгляд в этом случае лучше отказаться от Bootstrap меню и написать своё так как нужно.
      2. Ekzot
        13 февраля 2020, 11:04
        Здравствуйте. Есль ли способ в Bootstrap 4 сделать так, чтобы при нажатии на гамбургер менялся фон navbar?
        1. Александр Мальцев
          13 февраля 2020, 14:36
          Здравствуйте.
          Можно, но только с помощью JavaScript.
          Например, так:
          $('.navbar-toggler').click(function () {
            if (!$(this).closest('.navbar').find('.navbar-collapse').hasClass('show')) {
              $(this).closest('.navbar').css('background-color', '#fffde7');
            } else {
              $(this).closest('.navbar').css('background-color', 'unset');
            }
          });
          
          Пример navbar с меняющимся цветом фона
          1. Ekzot
            14 февраля 2020, 06:53
            Спасибо большое за ответ.
        2. Анна
          20 сентября 2019, 23:56
          Здравствуйте, Александр! Мне необходимо реализовать двухуровневое выпадающее меню, как Вы указали. Пытаюсь использовать плагин «bootstrap-submenu», но пока безуспешно.
          Не могли бы прокомментировать?
          Возможно, я неверно его подключаю:
          <head>
            ...
            <link rel="stylesheet" href="dist/css/bootstrap-submenu.css">
            <script src="dist/js/bootstrap-submenu.js" defer></script>
          </head>
          
          Файлы в соответствующих директориях.
          Для вывода использую такую конструкцию (Joomla):
          <nav class="navbar navbar-default" role="navigation" style=" margin: 0 auto; max-width: 1200px;">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <p class="top-name"><a class="navbar-brand" href="#"></a></p>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav" style="padding-top: 10px; font-size: 13px;">
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">ПУНКТ 1<span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Подпункт</a></li>
                    <li class="dropdown-submenu"><a href="#" class="dropdown-toggle">ПОДПУНКТ<span class="caret"></span></a>
                      <ul class="dropdown-menu" role="menu">
                        <li><a href="#">ЕЩЕ ПОДПУНКТ</a></li>
                      </ul>
                    </li>
                    <li><a href="#">Еще что-то</a></li>
                    <li class="divider"></li>
                    <li><a href="#">И еще</a></li>
                  </ul>
                </li>
            </div>
          </nav>
          
          В итоге меню все же схлопывается, стили не используются…
          Ссылка на тестовый домен: _http://vianta5f.bget.ru/home-3/in-ektsionnaya-meditsina/biorevitalizatsiya-gialuronovoj-kislotoj-kozhi
          Спасибо заранее!
          1. Александр Мальцев
            21 сентября 2019, 11:52
            Если Bootstrap 3 версии, то нужно в качестве bootstrap-submenu использовать 2 версию. Третья версия bootstrap-submenu предназначена для Bootstrap 4.
            Используется bootstrap-submenu следующим образом.
            1. Создание пункта меню с субменю:
            ...
            <li class="dropdown-submenu">
              <a href="#">Ссылка 2.2</a>
              <ul class="dropdown-menu">
                <li><a href="#">Ссылка 2.2.1</a></li>
                <li><a href="#">Ссылка 2.2.2</a></li>
                <li><a href="#">Ссылка 2.2.3</a></li>
                <li><a href="#">Ссылка 2.2.4</a></li>
              </ul>
            </li>
            ...
            
            2. Поместить после меню и подключения «bootstrap-submenu.min.js» скрипт:
            <script>
            $('[data-toggle="dropdown"]').submenupicker();
            </script>
            
            Посмотреть пример Navbar с субменю можно в песочнице.
            1. Анна
              21 сентября 2019, 15:26
              Спасибо большое за ответ!!!
              Но все же такой вариант у меня не работает:
              при подключении
              <script>
              $('[data-toggle="dropdown"]').submenupicker();
              </script>
              
              выдается ошибка Uncaught TypeError: $ is not a function
              при оборачивании
              <script src="/js/bootstrap-submenu.min.js"></script>
              
              <script>
              
              jQuery(document).ready(function($){
              
              $('[data-toggle="dropdown"]').submenupicker();
              
              });
              
              </script>
              
              ошибка пропадает, меню не схлопывается при клике, но и не открывается…
              Извините, что отнимаю у Вас время!

              P.S.
              полный код меню:
              <nav class="navbar navbar-default" role="navigation">
              <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              </button>
              <p class="top-name"><a class="navbar-brand" href="#"></a></p>
              </div>
              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
              <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
              aria-expanded="false">ПУНКТ МЕНЮ<span class="caret"></span></a>
              <ul class="dropdown-menu">
              <li><a href="#">Подпункт</a></li>
               <li class="dropdown-submenu"><a href="#">Еще подпункт<span class="caret"></span></a>
              <ul class="dropdown-menu">
              <li><a href="#">Субменю</a></li>
              </ul>
              </li>
              <li><a href="#">Еще что-то</a></li>
              <li class="divider"></li>
              <li><a href="#">И еще</a></li>
              </ul>
              </li>
              </div>
              </nav>
              <script src="/js/bootstrap-submenu.min.js"></script>
              <script>
              jQuery(document).ready(function($){
              $('[data-toggle="dropdown"]').submenupicker();
              });
              </script>
              
              1. Александр Мальцев
                22 сентября 2019, 02:16
                Необходимо убрать стили в «template.css» для «dropdown-menu». Они нарушают логику работы «bootstrap-submenu».
                Например, если в браузере отключить эти стили, то всё начинает отображаться:
                .dropdown .dropdown-menu {
                  display: block;
                  max-height: 0;
                  opacity: 0;
                  overflow: hidden;
                  transition: all .3s ease 0s;
                }
                1. Анна
                  22 сентября 2019, 16:54
                  Верно)) Спасибо БОЛЬШОЕ! Спасли нуба :))
          2. Мария
            17 сентября 2019, 23:07
            Здравствуйте! При добавлении на страницу navbar в двух и более количествах, при нажатии на любой из них по кнопке в мобильном виде отображается последний добавленный navbar на страницу :(
            Например: имеется navbar1 и navbar2, открыта мобильная версия. При нажатии на navbar1 выпадает список из navbar2, при нажатии на navbar2 — все тот же navbar2, так как последним был добавлен на страницу.
            В чем может быть проблема?
            1. Александр Мальцев
              18 сентября 2019, 08:04
              Здравствуйте!
              Кнопка «гамбургер» открывает то, на что указывает значение атрибута data-target:
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main">
              
              Вот блок, который она открывает #navbar-main (id, равно navbar-main):
              <div class="collapse navbar-collapse" id="navbar-main">
              
              Вам нужно в 1 меню в data-target, например, указать #navbar-main1 и блоку (его id), которое будет открываться соответственно navbar-main1.
              Во втором меню в data-target, например, указать #navbar-main2 и блоку (его id), которое будет открываться соответственно navbar-main2.
              1. Мария
                01 октября 2019, 01:22
                Очень благодарю за ответ! Однако, не работает — очень долго ломаю голову. В качестве примера создала два практически одинаковых NavBar'а с разными id, отличие лишь в тексте содержимого. При нажатии на кнопку всё равно открывается последний добавленный.

                <nav class="navbar navbar-expand-lg navbar-light bg-light">
                      <a class="navbar-brand" href="#">Navbar</a>
                      <button id="button_1" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                      </button>
                
                      <div class="collapse navbar-collapse" id="navbarSupportedContent1">
                        <ul class="navbar-nav mr-auto">
                          <li class="nav-item active">
                            <a class="nav-link" href="#">H <span class="sr-only">(current)</span></a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">L</a>
                          </li>
                          <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                              Dropdown
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
                              <a class="dropdown-item" href="#">A</a>
                              <a class="dropdown-item" href="#">A</a>
                              <div class="dropdown-divider"></div>
                              <a class="dropdown-item" href="#">S</a>
                            </div>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link disabled" href="#">Disabled</a>
                          </li>
                        </ul>
                      </div>
                    </nav>
                
                    <!--     Второй Navbar     -->
                
                    <nav class="navbar navbar-expand-lg navbar-light bg-light">
                      <a class="navbar-brand" href="#">Navbar</a>
                      <button id="button_2" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                      </button>
                
                      <div class="collapse navbar-collapse" id="navbarSupportedContent2">
                        <ul class="navbar-nav mr-auto">
                          <li class="nav-item active">
                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                          </li>
                          <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                              Dropdown
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown2">
                              <a class="dropdown-item" href="#">Action</a>
                              <a class="dropdown-item" href="#">Another action</a>
                              <div class="dropdown-divider"></div>
                              <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link disabled" href="#">Disabled</a>
                          </li>
                        </ul>
                      </div>
                    </nav>
                1. Александр Мальцев
                  01 октября 2019, 15:02
                  Значит, всё равно какой-то момент упускаете.
                  Вот наглядный пример двух navbar в песочнице, посмотрите, всё просто. Первое меню – «navbar-1», второе – «navbar-2».
            2. djdram
              14 марта 2019, 17:59
              Добрый день может у кого есть пример
              navbar при открытии на ПК на большом разрешении имеет горизонтальное меню в виде строки с кнопками
              при открытии фронта на мобильном устройстве он превращается в Toggle navigation в виде одной кнопки с выпадающим вертикальным меню.
              Вопрос как сделать так чтоб на мобильных устройствах с низким разрешением он не превращался в Toggle navigation а оставался также горизонтальным меню только убирал подписи к кнопкам оставляя допустим значки.

              1. djdram
                14 марта 2019, 18:10

                суть идеи примерно такая, использую 3 версию
                1. Александр Мальцев
                  18 марта 2019, 15:09
                  Добрый! Для решения этой задачи кнопки можно поместить в элемент, который в свою очередь поместить в элемент с классом «navbar-header». Видимость этого элемента с кнопками настроить с помощью медиа запросов так, чтоб он показывался только на мобильных устройствах.
              2. Раиса
                22 февраля 2019, 01:14
                Здравствуйте! Подскажите новичку, пожалуйста! Скопировала Ваш самый первый кусочек кода со структурой
                <nav class="navbar navbar-default">
                	<div class="container-fluid">
                		<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main">
                	        <span class="icon-bar"></span>
                	        <span class="icon-bar"></span>
                	        <span class="icon-bar"></span>
                        </button>
                    	<a class="navbar-brand" href="#">Brand</a>
                    	<div class="collapse navbar-collapse" id="navbar-main">
                    	</div>
                    </div>
                </nav>	
                
                , и у меня это выглядит вот так:
                pastenow.ru/430195dad66217b0b07463ecf34236f0
                Почему?
                1. Раиса
                  22 февраля 2019, 01:19
                  Кажется, я поняла, в 4-м бутстрапе эти классы не работают? и что же делать?
                  1. Александр Мальцев
                    22 февраля 2019, 15:10
                    Использовать HTML структуру компонента Navbar, используемую в 4 версии:
                    <nav class="navbar navbar-expand-lg navbar-light bg-light">
                      <a class="navbar-brand" href="#">Navbar</a>
                      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                      </button>
                      <div class="collapse navbar-collapse" id="navbar">
                        ...
                      </div>
                    </nav>
                    1. Раиса
                      22 февраля 2019, 21:19
                      Спасибо, пробую.
                    2. Раиса
                      22 февраля 2019, 01:39
                      Подключила еще 3-й, но лого справа, а кнопка слева. А нужно наоборот.
                      pastenow.ru/e4f0f393496954230164519d69a880a6
                  2. Архаил
                    31 января 2019, 17:46
                    Добрый день, Александр. Подскажите пожалуйста. Добавил на сайт меню bootstrap-offcanvas ссылка на скрипт.
                    а при нажатии на поле поиска, меню исчезает, появляется клавиатура, можно как то решить задачу, чтобы при клике на поле поиска, меню не пряталось, а вот уже после нажатия на кнопку уходило в сторону(при использовании поиска). Благодарю.
                    1. Александр Мальцев
                      04 февраля 2019, 17:39
                      Добрый! Не вижу смысла его дорабатывать, если интересно, то могу написать статью про то, как самостоятельно можно создать такое меню.
                      1. Архаил
                        07 февраля 2019, 23:37
                        Было бы здорово ознакомиться с материалом по этой теме и научиться самому.
                        1. Александр Мальцев
                          18 февраля 2019, 14:58
                          Можете пока посмотреть, как сделать offcanvas меню в этом примере.
                          1. Дмитрий
                            07 июня 2019, 22:25
                            А как сделать чтоб закрывалось по клику на свободной зоне, а не только на креcтик?
                            1. Александр Мальцев
                              17 июня 2019, 15:18
                              Это можно выполнить добавив на страницу следующий скрипт:
                              $(document).on('click', function (e) {
                                if ($('body').hasClass('offcanvas-open')) {
                                  if (!$(e.target).closest('.navbar').length) {
                                    $('.offcanvas-collapse').removeClass('open');
                                    $('body').removeClass('offcanvas-open');
                                  }
                                }
                              })
                              
                            2. Архаил
                              18 февраля 2019, 15:23
                              Александр, благодарю!
                      2. Zulya
                        30 ноября 2018, 00:54
                        Здравствуйте! Если дочерний список ссылок очень большой и при раскрытии подпунктов, то меню получается очень длинным. А возможно разделить на несколько колонок этот длинный список ссылок?
                        1. Александр Мальцев
                          03 декабря 2018, 15:08
                          Здравствуйте! Можно попробовать задать многоколоночный текст.
                          Например, для всех выпадающих списков или так как это вам нужно:
                          @media (min-width: 768px) {
                            .navbar .nav .dropdown-menu {
                              column-width: 200px; // оптимальная ширина колонки
                              column-count: 3; // оптимальное количество колонок
                              column-gap: 30px; // расстояние между колонками
                            }
                          }
                          
                          1. Zulya
                            03 декабря 2018, 17:21
                            Здравствуйте! Что-то не получается. Если добавляю
                            position:relative;
                            , то 3 колонки появляются и само активное меню (родитель выпадающего меню) расширяется до размера 3 колонок. А без
                            position:relative;
                            ничего не происходит.
                            1. Александр Мальцев
                              10 декабря 2018, 13:25
                              Так сложно гадать. Покажите пример на jsfiddle или на каком-нибудь другом подобном сервисе. Да и желающих помочь так будет больше…
                        2. serega
                          03 ноября 2018, 11:00
                          Была похожая проблема, но с логотипом
                          1. serega
                            03 ноября 2018, 10:59
                            Была похожая проблема, но с логотипом решил ее так
                            .navbar-brand {
                            background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
                            width: 200px;
                            }
                            Данный пример брал от сюда http://q-answer.ru/questions/bootstrap-3-navbar-s-logotipom-8154.html
                            1. Вячеслав
                              28 августа 2018, 12:08
                              Добрый день, Александр. Классный у Вас сайт. Жаль, что не натолкнулся на него раньше. У меня такая ситуация: сделал сайт на шаблоне в MODX, на кнопку гамбургер обратил внимание только сейчас — она не работает. Делал меню через Wayfinder, помню что долго делал… Подумал — я накосячил. Проверяю шаблон — а там кнопка гамбургер тоже не работает. Значит косячный шаблон? Я новичок, сайт первый, нахватался по верхам. Не могли бы посмотреть в чем проблема? Где ошибку искать?
                              Шаблон сайта:https://www.gettemplate.com/demo/initio/
                              Сам сайт: www.dvkgroup.com.ua
                              И еще одну проблему заметил — на телефоне некоторые картинки вытягиваются.
                              Заранее спасибо.
                              1. Александр Мальцев
                                28 августа 2018, 15:07
                                Прочитайте внимательно раздел «Назначение атрибутов и классов (как работает схлопывание меню)». Вы пропустили атрибут у элемента с классом navbar-collapse.

                                1. Вячеслав
                                  29 августа 2018, 09:07
                                  Cпасибо, Александр. Глаз — алмаз профессионала.
                                  Я попробовал пока на шаблоне. Там имелся такой код.
                                  <div class="container-fluid">
                                  				<div class="navbar-header">
                                  				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-main" data-target="#bs-example-navbar-collapse-1"> 
                                  				<span class="sr-only">Toggle navigation</span> 
                                  				<span class="icon-bar"></span> 
                                  				<span class="icon-bar"></span> 
                                  				<span class="icon-bar"></span> </button>
                                  			</div>
                                  			
                                  			<div class="navbar-collapse collapse" id="navbar-main">
                                  Я просто заменил
                                  data-target="#bs-example-navbar-collapse-1"
                                  на
                                  data-target="#navbar-main"
                                  как у Вас в примере.
                                  И о чудо! Кнопка заработала! Но возникает естественный вопрос — на кой ляд там этот код
                                  data-target="#bs-example-navbar-collapse-1"
                                  ?
                                  1. Вячеслав
                                    30 августа 2018, 09:21
                                    Все работает! Спасибо Александр — Вы мне сэкономили кучу времени и нервов)
                              2. barsik
                                24 августа 2018, 13:59
                                Александр, вы делаете крутой контент! Спасибо вам, за столь подробные и понятные статьи. Они дали большой толчок в моем развитии web! Я удивляюсь тому, что вы помогаете всем в комментариях на некоммерческой основе, хотя их проекты делают на этом деньги. Вы Человек с большой буквы! Но я бы ленился отвечать всем, на вопросы «не работает — помогите», чем больше человек сам приложит усилий, тем быстрее сам разовьется.
                                1. Александр Мальцев
                                  28 августа 2018, 15:02
                                  Спасибо, за отзыв!
                                2. Rexedead
                                  28 мая 2018, 16:06
                                  Добрый день! А есть ли способ, что бы «гамбургер» нормально отображался при раскрытии, если у navbar выставлено свойство max-height: 35px;? Пример ненормального отображения: i.imgur.com/ovtZ71m.gifv

                                  Если использовать свойство

                                  /*button[aria-expanded=«true»] {
                                  margin-top: -11px;
                                  }*/

                                  то во время анимации(сворачивания), все равно видно смещение

                                  1. Александр Мальцев
                                    29 мая 2018, 16:44
                                    Добрый!
                                    Необходимо просто для мобильной версии уменьшить размеры элементов, значения margin и padding. Например, вот так.
                                    1. Rexedead
                                      29 мая 2018, 17:04
                                      Большое спасибо!
                                  2. Andrey
                                    27 мая 2018, 13:02
                                    Нужно сделать горизонтальное расположение элементов внутри navbar, то есть если сидеть с телефона, то расположение элементов будет такое же как на PC, но внутри navbar.
                                    Как это сделать?
                                    1. Александр Мальцев
                                      27 мая 2018, 13:48
                                      Как это должно выглядеть? Лучше картинку, как на PC и как на смартфоне.
                                      1. Andrey
                                        29 мая 2018, 09:30
                                        Вид на PC: joxi.ru/Vrwl9aeFON6xkm.png
                                        Вид на телефоне(то что зачёркнуто, должно быть как и на PC т.е горизонтально идти): joxi.ru/82Q5N34ijLBOv2.png
                                        1. Александр Мальцев
                                          29 мая 2018, 17:04
                                          Написать стили, т.е. как эти элементы должны отображаться на мобильных устройствах.
                                          Например, так (демо):
                                           /* CSS */
                                          @media (max-width: 767.98px) {
                                            .nav.navbar-nav {
                                              display: flex;
                                            }
                                          }
                                          
                                    2. Алекс
                                      07 декабря 2017, 23:14
                                      Здравствуйте, использую на сайте стандартное дефолтное меню bootstrap, все работает и при уменьшении экрана меню скрывается и появляется кнопка. Для выпадающего меню заданы в своем файле css стили. Но проблема заключается в том, что при клике на кнопку .navbar-toggle на секунду появляются дефолтные стили bootstrap, а только затем переназначенные в своем файле css. Можно ли как-то убрать подгрузку дефолтных стилей без правки файла bootstrap.min.css.

                                      Шаг 2 появляется на секунду-полторы секунды, но это просто смотрится очень не эстетично.
                                      1. Александр Мальцев
                                        11 декабря 2017, 10:57
                                        Здравствуйте! Скорее всего, установлена анимация при применении CSS свойств, поэтому они и не назначаются сразу. Для того чтобы разобраться из-за чего конкретно, необходимо представить «живой» пример, а не картинку.
                                        1. Алекс
                                          17 января 2018, 03:26
                                          Здравствуйте, а можно как-то отправить ссылку на живой пример, без афиширования в личку (просьба руководителя). Просто уже не в первый раз встречаю такое запаздывание, а решить вопрос не получилось
                                      2. Ivan
                                        31 октября 2017, 23:36
                                        Здравствуйте Александр, пересмотрел все комментарии и не нашел ответа на свой вопрос. У меня такая проблема, я сделал 2 меню.
                                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" data-dismiss="#bs-example-navbar-collapse-2">
                                                    <span class="sr-only">Toggle navigation</span>
                                                    <span class="icon-bar"></span>
                                                    <span class="icon-bar"></span>
                                                    <span class="icon-bar"></span>
                                                  </button>
                                        
                                        		   <button type="button" style="height: 34px;" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                                                    <span class="sr-only">Toggle navigation</span>
                                                    <span><img src="http://narinyan.ru/wp-content/uploads/2015/09/location-icon-map-png-93d693c9-2482-44c1-9073-d95246ce6de3_iconmonstr-location-16-icon-300x300.png" style="width: 25px; margin-top: -5px;"></span>
                                                  </button>
                                        И сделал 2

                                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                              <ul class="nav navbar-nav">
                                                <li class="dropdown">
                                                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                                  <ul class="dropdown-menu">
                                                    <li><a href="#">Действие</a></li>
                                                    <li><a href="#">Другое действие</a></li>
                                                    <li><a href="#">Что-то еще</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Отдельная ссылка</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Еще одна отдельная ссылка</a></li>
                                                  </ul>
                                                </li>
                                              </ul>
                                        </div>
                                        
                                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
                                              <ul class="nav navbar-nav">
                                                <li class="dropdown">
                                                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                                  <ul class="dropdown-menu">
                                                    <li><a href="#">Действие</a></li>
                                                    <li><a href="#">Другое действие</a></li>
                                                    <li><a href="#">Что-то еще</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Отдельная ссылка</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Еще одна отдельная ссылка</a></li>
                                                  </ul>
                                                </li>
                                              </ul>
                                        </div>
                                        
                                        
                                        Проблема в том, что если открыть сначала одну вкладку меню, а потом другую, то первая не пропадает. Хотелось бы чтобы когда нажал первую она была активна, а если нажал вторую, то первая закрывается. Можно решить эту проблему? Заранее спасибо!
                                        1. Александр Мальцев
                                          05 ноября 2017, 05:47
                                          Это должно работать по умолчанию. Пример: jsfiddle.net/itchief/u2uxff7z/
                                        2. Андрей
                                          31 октября 2017, 16:49
                                          Подскажите пожалуйста, есть бутстрап меню с несколькими уровнями, как сделать чтобы первый уровень который выпадает при наведении был открыт по умолчанию.
                                          1. Александр Мальцев
                                            05 ноября 2017, 05:50
                                            Это зависит от того какое это меню. В стандартном меню Bootstrap это осуществляется посредством добавления класса open:
                                            ...
                                            <li class="dropdown open">
                                            ...
                                            
                                            1. Андрей
                                              31 октября 2017, 20:10
                                              Или просто подскажите может есть какой то способ чтобы оно было по умолчанию открытым.
                                            2. Andrey
                                              09 октября 2017, 00:53
                                              Уважаемый Александр, помогите пожалуйста начинающему.Как сделать что бы меню в bootstrap в мобильной версии закрывалось при клике на пункте из меню? Заранее благодарю, Андрей.
                                              У меня меню выглядит так:
                                              <div class="main-nav">
                                                    <div class="container">
                                                      <div class="navbar-header">
                                                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                                          <span class="sr-only">Toggle navigation</span>
                                                          <span class="icon-bar"></span>
                                                          <span class="icon-bar"></span>
                                                          <span class="icon-bar"></span>
                                                        </button>
                                                        <a class="navbar-brand" href="#">
                                                          <h1><img class="img-responsive" src="logo.jpg" alt="logo"></h1>
                                                        </a>                    
                                                      </div>
                                                      <div class="collapse navbar-collapse">
                                                        <ul class="nav navbar-nav navbar-right">                 
                                                          <li class="scroll active"><a href="#home-slider">Пункт1</a></li>
                                                          <li class="scroll"><a href="#services">Пункт2</a></li> 
                                                          <li class="scroll"><a href="#portfolio">Пункт3</a></li>
                                                          <li class="scroll"><a href="#about-us">Пункт4</a></li>
                                                          <li class="scroll"><a href="#team">Пункт5</a></li>
                                                          <li class="scroll"><a href="#contact">Пункт6</a></li>       
                                                        </ul>
                                                      </div>
                                                    </div>
                                                  </div>
                                              1. Александр Мальцев
                                                10 октября 2017, 14:00
                                                В статье приведено решение. Это осуществляется посредством добавления JavaScript на страницу:
                                                $(function(){
                                                  $(".navbar-collapse a").click(function() {
                                                    if (!$(this).hasClass("dropdown-toggle")) {
                                                      $(".navbar-collapse").collapse('hide');
                                                    }
                                                  });
                                                });
                                                
                                                1. Andrey
                                                  10 октября 2017, 14:22
                                                  Уважаемый Александр, спасибо большое.Но меню не закрывается.Вот мои скрипты, заранее благодарю.
                                                  <script type="text/javascript" src="/assets/house/js/jquery.js"></script>
                                                    <script type="text/javascript" src="/assets/house/js/bootstrap.min.js"></script>
                                                    <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=true(30 minutes)"></script>
                                                    <script type="text/javascript" src="/assets/house/js/jquery.inview.min.js"></script>
                                                    <script type="text/javascript" src="/assets/house/js/wow.min.js"></script>
                                                    <script type="text/javascript" src="/assets/house/js/mousescroll.js"></script>
                                                    <script type="text/javascript" src="/assets/house/js/smoothscroll.js"></script>
                                                    <script type="text/javascript" src="/assets/house/js/jquery.countTo.js"></script>
                                                    <script type="text/javascript" src="/assets/house/js/lightbox.min.js"></script>
                                                    <script type="text/javascript" src="/assets/house/js/main.js"></script>
                                                    
                                                    <script src="/assets/house/js/jjj/owl.carousel.min.js"></script>  
                                                    <script src="/assets/house/js/jjj/jquery.parallax-1.1.3.js"></script>
                                                    <script src="/assets/house/js/jjj/jquery.nicescroll.min.js"></script>
                                                    <script src="/assets/house/js/jjj/jquery.appear.js"></script>
                                                    <script src="/assets/house/js/jjj/jquery.nav.js"></script>
                                                    <script src="/assets/house/js/jjj/jquery.sticky.js"></script>  
                                                    <script src="/assets/house/js/jjj/jquery.fitvids.js"></script>
                                                    <script src="/assets/house/js/jjj/custom.js"></script>   
                                                    <script>
                                                        $(function(){
                                                    $(".navbar-collapse a").click(function() {
                                                      if (!$(this).hasClass("dropdown-toggle")) {
                                                        $(".navbar-collapse").collapse('hide');
                                                      }
                                                    });
                                                  });
                                                    </script> 
                                                  1. Александр Мальцев
                                                    05 ноября 2017, 05:57
                                                    Необходимо проверять на чистой сборке: jsfiddle.net/itchief/Luft0e2c/
                                                    В вашем случае необходимо определить скрипт, который предотвращает это действие.
                                              2. Максим Хализов
                                                07 октября 2017, 21:02
                                                Доброго дня, подскажите пожалуйста, как сделать в мобильном меню, чтобы при нажатии на какой-то пункт меню, все пункты скрывались и появлялись новые, допустим при клике на «категории» скрылись все пункты и появились пункты «категория 1» «категория 2» и тд, а так же в качестве первого пункта появилась стрелка которая при клике возвращает назад
                                                1. Александр Мальцев
                                                  05 ноября 2017, 06:33
                                                  Добрый день!
                                                  Пример как это можно сделать: jsfiddle.net/itchief/qvyacs2r/
                                                2. sasha
                                                  31 августа 2017, 13:46
                                                  Добрый день. Подскажите как разместить navbar как у вас в примере itchief.ru/assets/examples/examples.php?id=3
                                                  контент->navbar-> контент
                                                  тоесть не в самом верху страницы, а скажем через 200px
                                                  Спасибо
                                                  1. Александр Мальцев
                                                    31 августа 2017, 14:43
                                                    Добрый день.
                                                    Тут будет так как вы написали:
                                                    <div class="container">
                                                        Контент до navbar...
                                                    <div>
                                                    <nav class="navbar navbar-default navbar-static-top">
                                                        <div class="container-fluid">
                                                            Контент меню (раздел navbar-header и содержимое navbar-collapse)...
                                                        </div>
                                                    </nav>
                                                    <div class="container">
                                                        Контент после navbar...
                                                    <div>
                                                    
                                                  2. Ellis
                                                    23 августа 2017, 08:24
                                                    Здравствуйте, Александр. Спасибо за Ваш труд!
                                                    Осваиваю Bootstrap. Задача следующая. Необходимо сделать прозрачное горизонтальное меню над каруселью. Карусель должна занимать весь экран. Возможно ли это сделать с помощью классов Bootstrap? Буду благодарна за любые советы.
                                                    1. Александр Мальцев
                                                      24 августа 2017, 16:34
                                                      Добрый день!
                                                      Просто добавьте в CSS следующее:
                                                      .navbar {
                                                          background: rgba(255, 255, 255, 0.8);
                                                      }
                                                      
                                                      Значение 0.8 определяет степень прозрачности.
                                                    2. Анна
                                                      03 августа 2017, 22:33
                                                      Здравствуйте! Начинаю осваивать Bootstrap и уже столкнулась с проблемой: хочу написать свою тему для WP. Создала 3 файла: index.php, header.php и style.css. Файл со стилями пуст, в index.php содержится следующая строка:
                                                      <?php get_header(); ?> 
                                                      , а в header.php горизонтальное меню с кодом одного из примеров Вашего ресурса, а именно:
                                                      <!-- Классы navbar и navbar-default (базовые классы меню) -->
                                                      <nav class="navbar navbar-default">
                                                        <!-- Контейнер (определяет ширину Navbar) -->
                                                        <div class="container-fluid">
                                                          <!-- Заголовок -->
                                                          <div class="navbar-header">
                                                            <!-- Кнопка «Гамбургер» отображается только в мобильном виде (предназначена для открытия основного содержимого Navbar) -->
                                                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main">
                                                              <span class="icon-bar"></span>
                                                              <span class="icon-bar"></span>
                                                              <span class="icon-bar"></span>
                                                            </button>
                                                            <!-- Бренд или название сайта (отображается в левой части меню) -->
                                                            <a class="navbar-brand" href="#">Brand</a>
                                                          </div>
                                                          <!-- Основная часть меню (может содержать ссылки, формы и другие элементы) -->
                                                          <div class="collapse navbar-collapse" id="navbar-main">
                                                            <!-- Содержимое основной части -->
                                                          </div>
                                                        </div>
                                                      </nav>
                                                      В body больше ничего нет.
                                                      Все казалось понятно и просто, но неизвестно откуда взялся отступ сверху. Далее, я пытаюсь сделать фиксированное меню при прокрутке. Добавляю к nav класс «navbar-static-top» и стили «position: -webkit-sticky; position: sticky; top: 0;». Однако у меня получилось то, чего я никак не ожидала.
                                                      Вопрос: откуда взялся этот отступ? Как его убрать? Почему у меню сверху пропала граница?
                                                      Пожалуйста, помогите.
                                                      P.S. Прикрепляю скрин. itchief.ru/assets/uploadify/1/7/d/17dbeffcf7ed2a7a037bb60afa4e53cf.jpg
                                                      1. Александр Мальцев
                                                        05 августа 2017, 06:15
                                                        Не знаю, из-за чего у вас могут быть отступы.
                                                        Попробуйте добавить в CSS:
                                                        body {
                                                          margin: 0 !important;
                                                          padding: 0 !important;
                                                        }

                                                        Класс navbar-static-top не делает ничего кардинального, он только изменяет некоторое оформление горизонтального меню Navbar (убирает закругления углов, некоторые границы и т.д.). Из-за него у вас и пропала сверху граница.
                                                        Не представляю, как можно сделать фиксированное горизонтальное меню с помощью position:sticky. Он предназначен для фиксирования элемента при прокрутке только в рамках некоторого элемента и то только при условии, что в нём есть свободное вертикальное пространство.
                                                        Для создания основного горизонтального фиксированного меню, необходимо использовать position: fixed.
                                                      2. Борис
                                                        31 июля 2017, 09:05
                                                        Доброе утро, Александр. ctrl+f не помог. Прежде всего хочу поблагодарить за отличный материал и за обратную связь. Никак не могу в стандартном меню (navbar-inverse) выравнять по центру ul на десктопе. Хотелось бы флексом, но уже хоть как-нибудь. Не пойму что и куда двигать. Сместил ul процентами, так на мобилке боковой скролл появился. В общем только на Вас надежда)
                                                        1. Александр Мальцев
                                                          31 июля 2017, 17:32
                                                          Здравствуйте.
                                                          Один из вариантов — это использовать абсолютное позиционирование. Для этого необходимо создать дополнительный блок div, например c классом nav-center, и задать ему абсолютное положение внутри nav. А также изменить элемент ul, а именно задать ему CSS-свойство display со значением inline-block и отменить float.
                                                          CSS:
                                                          @media screen and (min-width: 768px) {
                                                            .nav-center {
                                                              position: absolute;
                                                              left: 120px;
                                                              right: 120px;
                                                              top: 0;
                                                              height: 50px;
                                                              text-align: center;
                                                            }
                                                            .nav-center .navbar-nav {
                                                              display: inline-block;
                                                              float: none;
                                                            }
                                                          }
                                                          
                                                          HTML:
                                                          <nav class="navbar navbar-default">
                                                            <div class="container-fluid">
                                                              <div class="navbar-header">
                                                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav">
                                                                  <span class="sr-only">Toggle navigation</span>
                                                                  <span class="icon-bar"></span>
                                                                  <span class="icon-bar"></span>
                                                                  <span class="icon-bar"></span>
                                                                </button>
                                                                <a class="navbar-brand" href="#">Brand</a>
                                                              </div>
                                                              <div class="collapse navbar-collapse" id="nav">
                                                          	  <div class="nav-center">
                                                          		  <ul class="nav navbar-nav">
                                                          			<li class="active"><a href="#">Ссылка 1<span class="sr-only">(текущая)</span></a></li>
                                                          			<li><a href="#">Ссылка 2</a></li>
                                                                      <!--...-->
                                                          		  </ul>
                                                          	  </div>
                                                              </div>
                                                            </div>
                                                          </nav>
                                                          
                                                        2. Мария Грас
                                                          25 июля 2017, 15:24
                                                          Александр, здравствуйте! Большое спасибо вам за удобный и полезный сайт. :)

                                                          У меня следующая проблема: нужно выровнять логотип и горизонтальное меню так, чтобы они были на одном уровне. Логотип все время уезжает вниз, никакие изменения в основном файле CSS на него не действуют.

                                                          Скриншот: _http://i93.fastpic.ru/big/2017/0725/5b/7cb274bae1a198f26076b9db42d6a65b.jpg

                                                          Сайт:

                                                          HTML:
                                                           <div class="navbar-header">
                                                          
                                                                              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".main-navbar">
                                                                                  <span class="icon-bar"></span>
                                                                                  <span class="icon-bar"></span>
                                                                                  <span class="icon-bar"></span>
                                                                              </button>
                                                                             
                                                                                  <a href="index.html" class="navbar-brand"><img src="http://uber-help.info/wp-content/uploads/2017/07/logo_5.png"></a>
                                                              </div>
                                                          CSS:
                                                          
                                                          .navbar-brand {
                                                              font-weight: bold;
                                                              font-size: 24px;
                                                              margin-bottom: 0px;
                                                              margin-left: 0;
                                                              position: relative;
                                                              text-shadow: none;
                                                          
                                                          .navbar-brand img {
                                                              position: relative;
                                                              top: 0px;
                                                              margin-right: 4px;
                                                              left: 0px;
                                                              vertical-align: middle;
                                                              max-height: 100%;
                                                          Заранее огромное спасибо!
                                                          1. Александр Мальцев
                                                            25 июля 2017, 16:49
                                                            Здравствуйте. Для корректного отображения меню необходимо:
                                                            1. Установить ему необходимую высоту, если же оно, конечно же, не равно 50px.
                                                            2. Рассчитать необходимые padding и установить их.
                                                            3. Откорректировать логотип (задать ему высоту кратную 2). Т.е., например, не 49px, а 50.

                                                            Как рассчитать отступы и их установить приведено в разделе этой статьи «Изменение высоты Navbar».
                                                            1. Мария Грас
                                                              25 июля 2017, 17:12
                                                              спасибо, буду пробовать :)
                                                              1. Александр Мальцев
                                                                25 июля 2017, 17:21
                                                                Пробуйте. Можно конечно изменить и с помощью абсолютного позиционирования, но это будет не очень хорошее решение.
                                                          2. Den
                                                            23 июля 2017, 23:46
                                                            Здравствуйте, подскажите пожалуйста, хочу сделать меню немного больше по высоте, но текст содержимого все равно остается сверху блока, как сделать так чтоб он прижался к низу? Нашел в интернете такое решение, но при его использовании ломается вся адаптивность:
                                                            .container{
                                                            position:relative;
                                                            }
                                                            .container>.navbar-collapse{
                                                            position: absolute;
                                                            left: 130px;
                                                            top: 40px;
                                                            }
                                                            1. Александр Мальцев
                                                              24 июля 2017, 06:45
                                                              Попробуйте воспользоваться инструкцией, приведённой в статье в разделе «Изменение высоты Navbar».
                                                            2. Максим Хализов
                                                              16 июля 2017, 18:16
                                                              Добрый день
                                                              Подскажите пожалуйста как сделать кнопку «вернуться на главную» в меню вместо toogle кнопки. Саму кнопку разместить у меня получилось, но выравнять кнопку по правому краю не получается ни как, pull-right не срабатывает, navbar-right тоже не помогает( Хочется чтобы кнопка была при любом разрешении экрана была прижата к правому краю меню, мне мобильное меню не нужно на этой странице. Я бы сделал это меню на обычном html и css, но сейчас уже пошел на принцип чтобы сделать на bootstrap, эту казалось бы простую задачу, опыт такой пригодился бы в будущем) Код выглядит сейчас так:
                                                              <header class="header">
                                                                              <div class="navbar navbar-default navbar-static-top">
                                                                                  <div class="container">
                                                                                      <div class="navbar-header">
                                                                                          <a href="/" class="navbar-brand">VAPE-DECK.ru</a>
                                                                                          <div class="navbar-btn navbar-right">
                                                                                              <a href="/" class="btn btn-success"><i class="fa fa-arrow-left" aria-hidden="true"></i> Вернуться на главную</a>
                                                                                          </div>
                                                                                      </div>
                                                                                  </div>
                                                                             </div>
                                                                          </header>
                                                              
                                                              1. Александр Мальцев
                                                                17 июля 2017, 04:20
                                                                Добрый!
                                                                1. Необходимо отменить, чтобы элемент с navbar-header был плавающим.
                                                                2. Использовать вместо navbar-right класс pull-right. Это необходимо сделать для того чтобы элемент выравнивался по правому краю вне зависимости от разрешения.
                                                                <header class="header">
                                                                    <div class="navbar navbar-default navbar-static-top">
                                                                        <div class="container">
                                                                            <div class="navbar-header" style="float:none;">
                                                                                <a href="/" class="navbar-brand">VAPE-DECK.ru</a>
                                                                                <div class="navbar-btn pull-right pull-padding">
                                                                                    <a href="/" class="btn btn-success"><i class="fa fa-arrow-left" aria-hidden="true"></i> Вернуться на главную</a>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </header>
                                                                
                                                                Дополнительно необходимо добавить ещё отступ для кнопки на маленьких экранах:
                                                                @media (max-width: 767px) {
                                                                  .pull-padding {
                                                                    padding-right: 15px;
                                                                  }
                                                                }
                                                                
                                                              2. djut
                                                                30 июня 2017, 13:40
                                                                Подскажите почему при адаптации сайта под мобильные устройства (RWD Tester в Chrome) размер меню больше на 20 пикселей (при разрешении экрана 375на667 меню имеет ширину 395px, в то время как body 375px). При этом на ноутбуке все в порядке — при разрешении 1366на768 меню имеет ширину как у body.
                                                                разметка:
                                                                <nav class="navbar navbar-custom navbar-fixed-top">
                                                                        <!-- Контейнер (определяет ширину Navbar) -->
                                                                        <div class="container-fluid">
                                                                            <!-- Заголовок -->
                                                                            <div class="navbar-header">
                                                                                <!-- Кнопка «Гамбургер» отображается только в мобильном виде (предназначена для открытия основного содержимого Navbar) -->
                                                                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main">
                                                                                    <span class="icon-bar"></span>
                                                                                    <span class="icon-bar"></span>
                                                                                    <span class="icon-bar"></span>
                                                                                </button>
                                                                                
                                                                                <!-- Бренд или название сайта (отображается в левой части меню) -->
                                                                                <a class="navbar-brand" href="#">Startup</a>
                                                                            </div>
                                                                            
                                                                            <!-- Основная часть меню (может содержать ссылки, формы и другие элементы) -->
                                                                            <div class="collapse navbar-collapse" id="navbar-main">
                                                                                <!-- Содержимое основной части -->
                                                                                <ul class="nav navbar-nav">
                                                                                    <li><a href="#">Home</a></li>
                                                                                    <li><a href="#">Services</a></li>
                                                                                    <li><a href="#">About</a></li>
                                                                                    <li><a href="#">Works</a></li>
                                                                                    <li><a href="#">Blog</a></li>
                                                                                    <li><a href="#">Clients</a></li>
                                                                                    <li><a href="#">Contact</a></li>                                        
                                                                                </ul>
                                                                            </div>
                                                                        </div>
                                                                    </nav>
                                                                стили .less:
                                                                .navbar-custom {
                                                                    .navbar-toggle {
                                                                        border-color: #fff;
                                                                        &:hover, &:focus {
                                                                            background-color: rgba(255, 255, 255, 0.3);
                                                                        }
                                                                    }
                                                                    .icon-bar {
                                                                        background-color: #fff;
                                                                    }
                                                                    .navbar-brand {
                                                                        padding-left: 30px;
                                                                        .mon_bld;
                                                                        font-size: 24px;
                                                                        color: #fff;
                                                                    }
                                                                    .navbar-nav {
                                                                        float: right;
                                                                    }
                                                                    .nav {
                                                                        a {
                                                                            .mon_rg;
                                                                            font-size: 14px;
                                                                            color: #fff;
                                                                            &:hover {
                                                                                background-color: #fff;
                                                                                color: #c0301c;
                                                                            }
                                                                        }
                                                                    }
                                                                }
                                                                1. Александр Мальцев
                                                                  01 июля 2017, 16:36
                                                                  Тут какие-то другие стили влияние оказывают. Наиболее просто в этом разобраться с помощью инструмента браузера «Инспектор элементов».
                                                                  1. djut
                                                                    05 июля 2017, 09:39
                                                                    То есть влияние оказывают стили Bootstrap? Так как все свои стили, примененные к меню я выложил здесь
                                                                    1. Александр Мальцев
                                                                      06 июля 2017, 15:53
                                                                      Если у вас не получается разобраться в этом самостоятельно, то необходимо собрать эту ситуацию, например, на jsfiddle.net. В этом случае можно будет посмотреть, из-за чего это возникло, и, подсказать вам решение. В противном случае можно только гадать…
                                                                2. Kir
                                                                  03 июня 2017, 15:09
                                                                  А как сделать форму поиска в nav на всю ширину? Пробую да всё никак не получается.
                                                                  1. Александр Мальцев
                                                                    04 июня 2017, 13:05
                                                                    Так просто это сделать нельзя.
                                                                    Тут либо использовать абсолютное позиционирование (необходимо просчитать все размеры) или js-код.
                                                                  2. Константин
                                                                    15 мая 2017, 17:50
                                                                    Александр, добрый день.
                                                                    Помогите с проблемой, пожалуйста. При нажатии левой кнопки мыши не срабатывает ссылка 1-го уровня меню (правой, в новом окне и т.д. открывается). Со ссылками 2-го уровня все в порядке.
                                                                    Спасибо.
                                                                    1. Александр Мальцев
                                                                      17 мая 2017, 16:09
                                                                      Воспользуйся следующим скриптиком (добавлен в раздел «Открытие dropdown меню при наведении»).
                                                                      1. Константин
                                                                        17 мая 2017, 19:08
                                                                        Александр, вы гений! Спасибо!
                                                                    2. AndreyAprel
                                                                      02 мая 2017, 20:28
                                                                      Подскажите, пожалуйста, какой js нужно поставить, чтобы navbar закрывался после нажатия на меню (_http://egemon.medialevel.ru/)?
                                                                      itchief.ru/assets/uploadify/b/e/f/bef9bd20ec6581e6f6005e4b20a70755.jpg
                                                                      1. Александр Мальцев
                                                                        03 мая 2017, 13:44
                                                                        Попробуйте, может поможет вам это решение: itchief.ru/lessons/bootstrap-3/119-bootstrap-3-customize-the-navbar#comment-2638
                                                                      2. Александр
                                                                        25 апреля 2017, 12:28
                                                                        Александр, приветствую.
                                                                        А возможно как-то перенаправить выпадающий блок вверх?
                                                                        (в продолжение использования Аффикс).

                                                                        То есть задача, следующая:
                                                                        1. если панелька внизу экрана/не прикрепленная кверху — то выпадающий блок меню должен открываться вверх.
                                                                        2. если панелька вверху экрана/прикрепленная — то выпадающий блок меню должен открываться вниз.
                                                                        1. Александр
                                                                          25 апреля 2017, 19:14
                                                                          С этим разобрался, методом проб.
                                                                          Александр, подскажите, а можно сделать так, чтобы выпадающие меню открывались при наведении мыши а не при клике?
                                                                          1. Александр Мальцев
                                                                            26 апреля 2017, 03:40
                                                                            Скачать плагин bootstrap-hover-dropdown.
                                                                            Подключить его к странице:
                                                                            <script src="js/bootstrap-hover-dropdown.min.js"></script>
                                                                            
                                                                            Добавить дополнительные атрибуты data-hover и data-close-others ко всем ссылкам меню, имеющим атрибут data-toggle со значением dropdown:
                                                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                                                                            
                                                                            Готовый пример: yadi.sk/d/h5pbm3L53HMUnK
                                                                            1. Александр
                                                                              26 апреля 2017, 07:53
                                                                              Благодарю.
                                                                        2. Сергей
                                                                          06 апреля 2017, 18:07
                                                                          Добрый день. Подскажите, имеется 3-х уровневое выпадающее меню. При выпадении первого уровня и отведении мышки от меню оно само не схлопывается (ОК). А вот при отведении мышки от 3-го уровня меню оно схлопывается и остается только второй уровень открытым. Не подскажите, какой класс отвечает за то, что бы и 3-й не схлопывался?
                                                                          <div class="collapse navbar-collapse" id="mainMenu">
                                                                            <ul class="nav navbar-nav">
                                                                              <li class="dropdown">
                                                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Модельный ряд<span class="glyphicon glyphicon-menu-down"></span></a>
                                                                                <ul class="dropdown-menu subbed">
                                                                                  <li>
                                                                                    <a href="#">Кроссоверы</a>
                                                                                    <ul class="list-inline text-uppercase sub-menu">
                                                                                      <li><a href="#"><figure><img src="..." alt="..."><figcaption>All cars</figcaption></figure></a></li>
                                                                                      ...
                                                                                    </ul>
                                                                                  </li>
                                                                                </ul>
                                                                              </li>
                                                                            </ul>
                                                                          </div>
                                                                          
                                                                          Должно оставаться так (_http://prntscr.com/et76n5), а остается так (http://prntscr.com/et7fuh).
                                                                          1. Александр Мальцев
                                                                            07 апреля 2017, 15:33
                                                                            В Bootstrap 3 по умолчанию нет 3 уровневого меню. Поэтому назначение классов, которые вы используете для реализации 3-его уровня, можете знать только вы.
                                                                            Для создания трёхуровневого меню navbar можете воспользоваться хорошим плагином Bootstrap-submenu.
                                                                          2. Stacy
                                                                            04 апреля 2017, 13:57
                                                                            Подскажите пожалуйста. Как сделать так чтобы меню, при адаптации выезжало с право?
                                                                            1. Александр Мальцев
                                                                              05 апреля 2017, 15:20
                                                                              Bootstrap Navbar не имеет таких настроек, с помощью которых можно было это настроить.
                                                                              Чтобы это создать придётся добавлять много CSS и JavaScript кода. Пример, как это сделать, можно посмотреть на jsfiddle.
                                                                              Ещё вариант — это использовать расширение Jasny Bootstrap.
                                                                              1. Stacy
                                                                                05 апреля 2017, 19:02
                                                                                Спасибо огромное! Лучший сайт! ;)
                                                                            2. Max
                                                                              18 марта 2017, 15:08
                                                                              Здравствуйте, Алексей. Помогите плз, допилить 3х уровневое меню на bootstrap. Имеется следующий код:
                                                                              HTML
                                                                              <div class="navbar navbar-default" role="navigation">
                                                                                  <div class="container">
                                                                                      <div class="navbar-header">
                                                                                          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                                                                                              <span class="sr-only">Toggle navigation</span>
                                                                                              <span class="icon-bar"></span>
                                                                                              <span class="icon-bar"></span>
                                                                                              <span class="icon-bar"></span>
                                                                                          </button>
                                                                                      </div>
                                                                                      <div class="collapse navbar-collapse navbar-ex1-collapse">
                                                                                          <ul class="nav navbar-nav">
                                                                                              <li class="menu-item dropdown">
                                                                                                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
                                                                                                  <ul class="dropdown-menu">
                                                                                                      <li class="menu-item dropdown dropdown-submenu">
                                                                                                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
                                                                                                          <ul class="dropdown-menu">
                                                                                                              <li class="menu-item ">
                                                                                                                  <a href="#">Link 1</a>
                                                                                                              </li>
                                                                                                              <li class="menu-item dropdown dropdown-submenu">
                                                                                                                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
                                                                                                                  <ul class="dropdown-menu">
                                                                                                                      <li>
                                                                                                                          <a href="#">Link 3</a>
                                                                                                                      </li>
                                                                                                                  </ul>
                                                                                                              </li>
                                                                                                          </ul>
                                                                                                      </li>
                                                                                                  </ul>
                                                                                              </li>
                                                                                          </ul>
                                                                                      </div>
                                                                                  </div>
                                                                              </div>
                                                                              CSS:
                                                                              .navbar-toggle:hover {
                                                                                top:0;
                                                                                left:100%;
                                                                                margin-top:-6px;
                                                                                margin-left:-1px;
                                                                                -webkit-border-radius:0 6px 6px 6px;
                                                                                -moz-border-radius:0 6px 6px 6px;
                                                                                border-radius:0 6px 6px 6px;
                                                                              }
                                                                              .dropdown-submenu {
                                                                                  position:relative;
                                                                              }
                                                                              .dropdown-submenu>.dropdown-menu {
                                                                                  top:0;
                                                                                  left:100%;
                                                                                  margin-top:-6px;
                                                                                  margin-left:-1px;
                                                                                  -webkit-border-radius:0 6px 6px 6px;
                                                                                  -moz-border-radius:0 6px 6px 6px;
                                                                                  border-radius:0 6px 6px 6px;
                                                                              }
                                                                              .dropdown-submenu:hover>.dropdown-menu {
                                                                                  display:block;
                                                                              }
                                                                              .dropdown-submenu>a:after {
                                                                                  display:block;
                                                                                  content:" ";
                                                                                  float:right;
                                                                                  width:0;
                                                                                  height:0;
                                                                                  border-color:transparent;
                                                                                  border-style:solid;
                                                                                  border-width:5px 0 5px 5px;
                                                                                  border-left-color:#cccccc;
                                                                                  margin-top:5px;
                                                                                  margin-right:-10px;
                                                                              }
                                                                              .dropdown-submenu:hover>a:after {
                                                                                  border-left-color:#ffffff;
                                                                              }
                                                                              .dropdown-submenu.pull-left {
                                                                                  float:none;
                                                                              }
                                                                              .dropdown-submenu.pull-left>.dropdown-menu {
                                                                                  left:-100%;
                                                                                  margin-left:10px;
                                                                                  -webkit-border-radius:6px 0 6px 6px;
                                                                              }
                                                                              Мне необходимо, чтобы меню открывалось при наведении курсора на кнопку. То есть чтобы список вываливался не при клике на кнопку «drop down», а при наведении на кнопку. В последующем эта кнопка будет заменена на ссылку.
                                                                              1. Александр Мальцев
                                                                                21 марта 2017, 12:06
                                                                                Для этой задачи уже есть готовый компонент. Посмотрите в этом комментарии:
                                                                                itchief.ru/lessons/bootstrap-3/bootstrap-3-custom-navigation-menu#comment-2832
                                                                              2. Сергей
                                                                                01 февраля 2017, 11:24
                                                                                Добрый день, Александр. Большое спасибо за ресурс! Подскажите пожалуйста: navbar-fixed-top, cms drupal, с body понятно, но под navbar уходит и админ панель, как ее оттуда вытащить? Заранее спасибо!
                                                                                1. Александр Мальцев
                                                                                  03 февраля 2017, 16:54
                                                                                  Здравствуйте. Необходимо сдвинуть либо navbar, либо панель администратора.
                                                                                  Например, можно сделать так:
                                                                                  <style>
                                                                                  body {
                                                                                    padding-top: 170px;
                                                                                  }
                                                                                  .navbar-fixed-top {
                                                                                    top: 100px;
                                                                                  }
                                                                                  </style>
                                                                                  
                                                                                2. Тимофей
                                                                                  23 января 2017, 11:06
                                                                                  Добрый день, как сделать, что бы меню открывалось не вниз, а на верх?
                                                                                  1. Александр Мальцев
                                                                                    26 января 2017, 13:57
                                                                                    Воспользуйся этим комментарием: itchief.ru/lessons/bootstrap-3/119-bootstrap-3-customize-the-navbar#comment-3457
                                                                                  2. Alex-RNS
                                                                                    06 января 2017, 21:52
                                                                                    Шеф, помоги! Есть выпадающий список, который при помощи
                                                                                    @media (min-width: 767px){
                                                                                    .dropdown:hover  .dropdown-menu {
                                                                                    		margin: 0;
                                                                                    		display: block;
                                                                                    }
                                                                                    }
                                                                                    сделал выпадающим при наведении, но само выпадающее меню неактивно. Нужно кликнуть по родителю, чтоб были активны дети.
                                                                                    1. Александр Мальцев
                                                                                      07 января 2017, 05:53
                                                                                      Попробуй вместо CSS-стилей использовать JavaScript-код:
                                                                                      $(function() {
                                                                                        $('ul.nav li.dropdown').hover(
                                                                                          function(){ 
                                                                                      	  if (window.matchMedia('(min-width:768px)').matches) {		
                                                                                              $(this).addClass('open');
                                                                                      	  }
                                                                                      	},
                                                                                          function(){ 
                                                                                            if (window.matchMedia('(min-width:768px)').matches) {
                                                                                              $(this).removeClass('open');
                                                                                            }
                                                                                          }
                                                                                        );	
                                                                                      });
                                                                                      
                                                                                    2. Arhan
                                                                                      02 января 2017, 03:29
                                                                                      Помогите, пожалуйста, с навигацией на сайте.
                                                                                      1. Сделал чанк Navbar
                                                                                      2. Закинул в него pdoMenu со следующим кодом:
                                                                                      <!-- Меню -->
                                                                                      <nav role="navigation" class="navbar navbar-default navbar-static-top">
                                                                                      <div class="container">
                                                                                          <div class="navbar-header">
                                                                                              [[pdoMenu? 
                                                                                                  &level=`2` 
                                                                                                  &parents=`0`
                                                                                                  &outerClass=`nav navbar-nav navbar-right`
                                                                                                  &tplOuter=`@INLINE <ul [[+classes]] id="menu">[[+wrapper]]</ul>` 
                                                                                                  &tplInner=`@INLINE <ul class="dropdown-menu">[[+wrapper]]</ul>`
                                                                                                  &tplParentRow=`@INLINE 
                                                                                                  <li [[+classes]]>
                                                                                                      <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="[[+link]]" [[+attributes]]>
                                                                                                          [[+menutitle]]<span class="caret"></span>
                                                                                                      </a>
                                                                                                      [[+wrapper]]
                                                                                                  </li>`
                                                                                              ]]
                                                                                              </div>
                                                                                          </div>
                                                                                      </nav>
                                                                                      3. Закинул чанк в шаблон
                                                                                      , но не все меню работает правильно т.е. меню без категорий работает нормально, но при нажатии на категорию или вложеное в ней меню (со второго клика) сайт начинает падать, отображаться не правильно: картинки не отображаются, не придерживается стилей как-будто их нет вовсе, любой клик на пункт меню перекидывает на главную страницу, но нажав на лого или пункт главная приводит сайт в порядок.
                                                                                      Может кто сталкивался или знает где ошибка?
                                                                                      1. Александр Мальцев
                                                                                        02 января 2017, 20:26
                                                                                        Проверьте, правильно ли у вас подключён на главной и других страницах сайта фреймворк Bootstrap. А также обследуйте, каким образом у вас осуществляется построение меню на всех страницах сайта, а не только на главной. Ну и проверьте базовые составляющие страницы (HTML, CSS, JavaScript).
                                                                                        1. Arhan
                                                                                          03 января 2017, 16:58
                                                                                          Могу ссылку на сайт открыть, а то появилось большое желание перейти на другой движек (сроки поджимают)
                                                                                          1. Александр Мальцев
                                                                                            06 января 2017, 07:25
                                                                                            Перед тем как что-то делать на движке MODX Revolution, надо с ним хотя бы немножко разобраться. Если вышеприведённый комментарий не сможете выполнить, то пришлите коды на сайт, помогу исправить вашу проблему…
                                                                                          2. Arhan
                                                                                            03 января 2017, 02:59
                                                                                            Вот так я подключаю css (чанк Head):
                                                                                            <head>
                                                                                                <meta charset="utf-8">
                                                                                                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                                                                                                <meta name="viewport" content="width=device-width, initial-scale=1">
                                                                                                <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
                                                                                                <title>[[*pagetitle]]</title>
                                                                                            
                                                                                                <!-- Bootstrap -->    
                                                                                            	<!--<link href="/assets/template/css/bootstrap.css" rel="stylesheet">-->
                                                                                                <link href="/assets/template/css/bootstrap.min.css" rel="stylesheet">
                                                                                                <!--<link href="/assets/template/css/bootstrap-theme.css" rel="stylesheet">-->
                                                                                                <link href="/assets/template/css/bootstrap-theme.min.css" rel="stylesheet">
                                                                                            
                                                                                                <link href="/assets/template/css/style.css" rel="stylesheet">
                                                                                                
                                                                                                <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
                                                                                                <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
                                                                                                <!--[if lt IE 9]>
                                                                                                  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
                                                                                                  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
                                                                                                <![endif]-->
                                                                                              </head>
                                                                                            так я подключаю js-скрипты (чанк Footer-script):
                                                                                            <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
                                                                                                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
                                                                                            
                                                                                            	<!--<script src="../assets/template/js/bootstrap.js"></script>-->
                                                                                                <script src="../assets/template/js/bootstrap.min.js"></script>
                                                                                                <script src="../assets/template/js/npm.js"></script>
                                                                                                <script src="../assets/template/js/jquery-3.1.1.min.js"></script>
                                                                                                
                                                                                                <!-- Скрипт для чанка FeelBack (обратная связь) -->
                                                                                                <!--<script src="assets/template/js/FeelBackMessage.js"></script>-->
                                                                                            Меню строю так (чанк Navbar):
                                                                                            <!-- Меню -->
                                                                                            <nav role="navigation" class="navbar navbar-default navbar-static-top">
                                                                                            <div class="container">
                                                                                                <div class="navbar-header navbar-right">
                                                                                                    [[pdoMenu? 
                                                                                                        &level=`2` 
                                                                                                        &parents=`0`
                                                                                                        &outerClass=`nav navbar-nav`
                                                                                                        &tplOuter=`@INLINE <ul [[+classes]] id="menu">[[+wrapper]]</ul>` 
                                                                                                        &tplInner=`@INLINE <ul class="dropdown-menu">[[+wrapper]]</ul>`
                                                                                                        &tplParentRow=`@INLINE 
                                                                                                            <li [[+classes]]>
                                                                                                                <a class="dropdown-toggle" data-toggle="dropdown" href="[[+link]]" [[+attributes]]>
                                                                                                                    [[+menutitle]]<span class="caret"></span>
                                                                                                                </a>
                                                                                                                [[+wrapper]]
                                                                                                            </li>`
                                                                                                    ]]
                                                                                                    </div>
                                                                                                </div>
                                                                                            </nav>
                                                                                            Шаблон Главной страницы:
                                                                                            <!DOCTYPE html>
                                                                                            <html lang="en">
                                                                                                
                                                                                                [[$Head?]]
                                                                                                
                                                                                              <body>
                                                                                                  
                                                                                                <div class="jumbotron">
                                                                                                <!-- Шапка (Header) -->
                                                                                                [[$Header?]]
                                                                                                
                                                                                                <!-- Меню -->
                                                                                                [[$Navbar?]]
                                                                                                
                                                                                                <!-- Слайдер -->
                                                                                                [[$Slider?]]
                                                                                            
                                                                                                </div>
                                                                                            
                                                                                                <!-- Thumbnails -->
                                                                                                [[$Thumbnails?]]
                                                                                            
                                                                                                
                                                                                                
                                                                                                
                                                                                                <!-- Наполнение (Содержимое) -->
                                                                                                <div class="container">
                                                                                                [[*content]]
                                                                                                </div>
                                                                                                
                                                                                                <!-- Подвал (Footer) -->
                                                                                                [[$Footer?]]
                                                                                                
                                                                                                <!-- Скрипты -->
                                                                                                [[$Footer-script?]]
                                                                                              </body>
                                                                                            </html>
                                                                                            Основной шаблон (для других страниц):
                                                                                            <!DOCTYPE html>
                                                                                            <html lang="en">
                                                                                                [[$Head?]]
                                                                                              <body>
                                                                                                <div class="jumbotron">
                                                                                                    <!-- Шапка (Header) -->
                                                                                                    [[$Header?]]
                                                                                                    
                                                                                                    <!-- Меню -->
                                                                                                    [[$Navbar?]]
                                                                                                </div>
                                                                                                
                                                                                                <!-- Крошки -->
                                                                                                    [[$Crumbs?]]
                                                                                                    
                                                                                                <!-- Наполнение (Содержимое) -->
                                                                                                <div class="container">
                                                                                                    <h3>[[*longtitle]]</h3>
                                                                                                    [[*content]]
                                                                                                </div>
                                                                                                
                                                                                                <!-- Подвал (Footer) -->
                                                                                                [[$Footer?]]
                                                                                                
                                                                                                <!-- Скрипты -->
                                                                                                [[$Footer-script?]]
                                                                                              </body>
                                                                                            </html>
                                                                                            Было начал грешить на бесплатный хостинг — beget.
                                                                                            Подскажите, пожалуйста, где ошибка? И как Вы код, на форуме, делаете цветным?
                                                                                            Спасибо.
                                                                                            1. Александр Мальцев
                                                                                              06 января 2017, 13:59
                                                                                              Оформление кода (раскраску) можно выполнить с помощью скрипта prettyprint. Чтобы он автоматически выставлялся в комментариях необходимо воспользоваться настройками Jevix. Для этого необходимо перейти в раздел админки «Наборы параметров», выбрать соответствующий набор и отредактировать в нём параметр cfgSetAutoReplace. Например, так:
                                                                                              [["±","©","©","®","©","©","®","<code","code>"],["±","©","©","®","©","©","®","<pre class=\"prettyprint\"","pre>"]]
                                                                                              1. Arhan
                                                                                                06 января 2017, 23:54
                                                                                                Это Вы про modx или на Вашем сайте?
                                                                                                1. Александр Мальцев
                                                                                                  07 января 2017, 10:56
                                                                                                  Если на сайте, то код необходимо обернуть в конструкцию:
                                                                                                  <pre class="prettyprint">
                                                                                                  </pre>
                                                                                                  
                                                                                                  На сайте некоторое время назад, любой фрагмент кода получал автоматическую расцветку. Т.е. код, помещённый в элемент code, превращался в вышеприведённую конструкцию. Это конечно хорошо, но если кусков кода на странице много, то это увеличивает время необходимое на отображение этой страницы в браузере. Т.е. открытие страницы сильно нагружает процессор пользователя, т.к. ему приходится отформатировать различными цветами большие куски кода. Поэтому в последнее время на сайте этого не происходит. Но если вы хотите это сделать, то оберните код не в элемент code, а в pre с классом prettyprint.
                                                                                                  1. Александр Мальцев
                                                                                                    07 января 2017, 09:59
                                                                                                    Это про MODX и дополнение Tickets, которое использует Jevix.
                                                                                                2. Александр Мальцев
                                                                                                  06 января 2017, 07:20
                                                                                                  Здравствуйте. Что-то не заметил у вас тега base в разделе head?
                                                                                                  <base href="[[++site_url]]">
                                                                                                  
                                                                                                  После указания этого тега пути к файлам будут рассчитываться уже относительно корня сайта. Указания путей к файлам осуществляйте следующим образом:
                                                                                                  <link href="[[++assets_url]]template/css/bootstrap.min.css" rel="stylesheet">
                                                                                                  <script src="[[++assets_url]]template/js/bootstrap.min.js"></script>
                                                                                                  
                                                                                                  1. Arhan
                                                                                                    06 января 2017, 23:25
                                                                                                    Спасибо Вам большое. Вы очень помогли. Сайт зафункционировал правильно. Спасибо.
                                                                                            2. Виталий
                                                                                              29 декабря 2016, 22:05
                                                                                              Александр, добрый день. Можете помочь подключить navbar(версия bootstrap 4) к instantcms 2.6.1? Как-то там непонятно меню устроено…
                                                                                              Думаю это многим полезно будет.
                                                                                              С меня пиво на любой кошелек.
                                                                                              Спасибо.
                                                                                              1. Александр Мальцев
                                                                                                06 января 2017, 07:27
                                                                                                Здравствуйте, с instantcms не знаком. Извините, не смогу вам помочь.
                                                                                              2. Валерий
                                                                                                07 декабря 2016, 09:47
                                                                                                Александр, добрый день! Подскажите, пжлста, как к пункту подменю добавить пункт под-подменю. Пробовал по такой же схеме, как для меню-подменю, так не раскрывается и схлопывается.
                                                                                                1. Александр Мальцев
                                                                                                  08 декабря 2016, 12:52
                                                                                                  Код для такого подменю можно взять из Bootstrap 2.
                                                                                                  Элемент li необходимо расположить в ul с классом dropdown-menu:
                                                                                                  <li class="dropdown-submenu">
                                                                                                    <a tabindex="-1" href="#">Наведи на меня...</a>
                                                                                                    <ul class="dropdown-menu">
                                                                                                      <li><a href="#">Пункт под-подменю 1...</a></li>
                                                                                                      <li><a href="#">Пункт под-подменю 2...</a></li>
                                                                                                      <li><a href="#">Пункт под-подменю 3...</a></li>
                                                                                                    </ul>
                                                                                                  </li>
                                                                                                  
                                                                                                  В CSS добавить следующие стили:
                                                                                                  .dropdown-submenu {
                                                                                                    position: relative;
                                                                                                  }
                                                                                                  .dropdown-submenu>.dropdown-menu {
                                                                                                    top: 0;
                                                                                                    left: 100%;
                                                                                                    margin-top: -6px;
                                                                                                    margin-left: -1px;
                                                                                                    -webkit-border-radius: 0 6px 6px 6px;
                                                                                                    -moz-border-radius: 0 6px 6px;
                                                                                                    border-radius: 0 6px 6px 6px;
                                                                                                  }
                                                                                                  .dropdown-submenu:hover>.dropdown-menu {
                                                                                                    display: block;
                                                                                                  }
                                                                                                  .dropdown-submenu>a:after {
                                                                                                    display: block;
                                                                                                    content: " ";
                                                                                                    float: right;
                                                                                                    width: 0;
                                                                                                    height: 0;
                                                                                                    border-color: transparent;
                                                                                                    border-style: solid;
                                                                                                    border-width: 5px 0 5px 5px;
                                                                                                    border-left-color: #ccc;
                                                                                                    margin-top: 5px;
                                                                                                    margin-right: -10px;
                                                                                                  }
                                                                                                  .dropdown-submenu:hover>a:after {
                                                                                                    border-left-color: #fff;
                                                                                                  }
                                                                                                  .dropdown-submenu.pull-left {
                                                                                                    float: none;
                                                                                                  }
                                                                                                  .dropdown-submenu.pull-left>.dropdown-menu {
                                                                                                    left: -100%;
                                                                                                    margin-left: 10px;
                                                                                                    -webkit-border-radius: 6px 0 6px 6px;
                                                                                                    -moz-border-radius: 6px 0 6px 6px;
                                                                                                    border-radius: 6px 0 6px 6px;
                                                                                                  }
                                                                                                  
                                                                                                  1. Валерий
                                                                                                    12 декабря 2016, 05:31
                                                                                                    Александр, огромное спасибо: и за оперативный ответ, и за реальную помощь. На вашем сайте недавно, но уже успел оценить его.
                                                                                                2. Вячеслав
                                                                                                  17 сентября 2016, 21:51
                                                                                                  Здравствуйте, Александр, подскажите пжлста с вопросом:
                                                                                                  — bootstrap 3
                                                                                                  — в одной строке «навигационное меню» по сайту и меню «входа/регистрации»
                                                                                                  Вопрос — есть ли возможность схлопывания меню в кнопку (с выпадающим вертикальным меню) при разных разрешениях экрана. Т.е. чтобы меню входа/регистрации схлопывалось при разрешении 992px, а основное меню схлопывалось в кнопку при разрешении 768px?
                                                                                                  Заранее спасибо за ответ
                                                                                                  1. Александр Мальцев
                                                                                                    18 сентября 2016, 10:12
                                                                                                    С помощью медиа запросов. Основное меню и так будет схлопываться при разрешении 768px. А вот для регистрации необходимо будет создать два состояния меню. Одно будет видно при разрешения больше 992px, а другое когда данная ширина меньше.
                                                                                                    1. Вячеслав
                                                                                                      18 сентября 2016, 10:29
                                                                                                      Это получается для меню регистрации необходимо отдельные классы создавать, копировать CSS отвечающий за схлопывание при 768px, переписывать в этом CSS классы для регистрации и выставлять значение схлопывания 992px?
                                                                                                      1. Александр Мальцев
                                                                                                        18 сентября 2016, 11:37
                                                                                                        Не знаю как там у Вас.
                                                                                                        Можно например сделать так:
                                                                                                        <nav class="navbar navbar-default">
                                                                                                          <div class="container-fluid">
                                                                                                            <div class="navbar-header">
                                                                                                              <!-- ... -->
                                                                                                            </div>
                                                                                                            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                                                                                              <ul class="nav navbar-nav">
                                                                                                                <!-- Основное меню --> 
                                                                                                              </ul>
                                                                                                              <ul class="nav navbar-nav navbar-right">
                                                                                                                <!-- Пункты 1 и 2 (будут отображаться на всех устройствах, кроме sm) -->
                                                                                                                <li class="hidden-sm"><a href="#">Пункт 1</a></li>
                                                                                                                <li class="hidden-sm"><a href="#">Пункт 2</a></li>
                                                                                                                <!-- Эти пункты на sm будут схлопываться -->
                                                                                                                <li class="dropdown hidden-xs hidden-md hidden-lg">
                                                                                                                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="glyphicon glyphicon-menu-hamburger"></i></a>
                                                                                                                  <ul class="dropdown-menu">
                                                                                                                    <li><a href="#">Пункт 1</a></li>
                                                                                                                    <li><a href="#">Пункт 2</a></li>
                                                                                                                  </ul>
                                                                                                                </li>
                                                                                                              </ul>
                                                                                                            </div>
                                                                                                          </div>
                                                                                                        </nav>
                                                                                                        
                                                                                                  2. Фарход
                                                                                                    01 августа 2016, 12:55
                                                                                                    Ребята помогите с проблемой, когда меню схлопывается(для маленьких экранов) и появляется кнопка для раскрытия меню, у меня на сайте есть слайдер и вот когда меню открывается оно проходит под слайдером, вместо того что бы его сдвигать вниз?
                                                                                                    1. Александр Мальцев
                                                                                                      05 августа 2016, 11:57
                                                                                                      Настройка положения элементов по оси Z осуществляется с помощью CSS свойства z-index.
                                                                                                      Вам необходимо сделать что-то подобное этому:
                                                                                                      .navbar .nav > li {
                                                                                                        z-index: 10001;
                                                                                                      }
                                                                                                      
                                                                                                    2. JOYsticK
                                                                                                      30 июня 2016, 18:49
                                                                                                      Впервые пробую работать с bootstrap, скачал готовый шаблон, в котором идет переход по якорям
                                                                                                      <li><a href="#top">Главная</a></li>
                                                                                                      и тд. Но если поставить в ссылку
                                                                                                      <li><a href="index.html#top">Главная</a></li>
                                                                                                      , то при клике мышкой перехода не будет, подскажите как разрешить переход?
                                                                                                      1. Александр Мальцев
                                                                                                        02 июля 2016, 10:03
                                                                                                        Переход будет на страницу (если не используется тег base), которая расположена в этом же разделе, но имеет имя index.html. При этом после перехода на эту страницу (index.html) браузер прокрутит её до элемента имеющего идентификатор top. Если у Вас этой страницы нет, то получите ошибку 404.
                                                                                                        Т.е. допустим сейчас открыта страница:
                                                                                                        http://itchief.ru/lessons/bootstrap-3/38-bootstrap-3-navigation-menu
                                                                                                        
                                                                                                        Если сейчас я в ней размещу ссылку:
                                                                                                        <a href="index.html#top">Главная</a>
                                                                                                        
                                                                                                        То при нажатию на неё я перейду на страницу index.html, расположенную в этом разделе:
                                                                                                        http://itchief.ru/lessons/bootstrap-3/index.html#top
                                                                                                        
                                                                                                        Если Вы хотите чтобы относительные ссылки шли от корня, то используйте элемент base:
                                                                                                        <base href="http://itchief.ru/">
                                                                                                        
                                                                                                        После этого эта ссылка будет ввести на страницу, расположенную в корневом разделе.

                                                                                                        Кроме использования относительных ссылок, можно использовать абсолютные (т.е. от корня сайта). Начинаются они со слэша (/).
                                                                                                        <a href="/index.html#top">Главная</a>
                                                                                                        
                                                                                                        1. JOYsticK
                                                                                                          05 июля 2016, 17:36
                                                                                                          спасибо за ответы, разобрался, дело было Single Page Nav Plugin JS.
                                                                                                          1. JOYsticK
                                                                                                            05 июля 2016, 13:21
                                                                                                            вот сам шаблон, если конечно есть время с этим помочь разобраться.
                                                                                                            1. JOYsticK
                                                                                                              05 июля 2016, 11:44
                                                                                                              такой метод пробовал, элемент base в обще не получилось применить.
                                                                                                              а вот
                                                                                                              <a href="http://мойсайт/index.html">Главная</a>
                                                                                                              так же как и
                                                                                                              <a href="/index.html">Главная</a>
                                                                                                              при наведении мышкой показывает ссылку, если нажать правой мышкой и в контекстном меню выбрать открыть в новом окне то откроется главная, а если нажать левый мышкой то ничего не происходит, левой мышкой работают только якоря.
                                                                                                          2. Дмитрий
                                                                                                            13 июня 2016, 05:23
                                                                                                            Здравствуйте! У меня в мобильной версии когда кликаю на пункт меню, не раскрывается подменю. А если на обычном разрешении, то все работает нормально. Подскажите в чем проблема?
                                                                                                            1. Александр Мальцев
                                                                                                              14 июня 2016, 13:04
                                                                                                              Здравствуйте! За раскрытие пункта подменю отвечает плагин Bootstrap Dropdowns и соответствующие стили. Если Вы используете полную версию Bootstrap, и данные плагины и стили включены в файлы bootstrap.js и boostrap.css, то необходимо проверить не оказывает ли на работу влияние сторонние стили или скрипты. Попробуйте отключить всё кроме Bootstrap и библиотеки jQuery, и проверить.
                                                                                                            2. сергей
                                                                                                              27 мая 2016, 21:21
                                                                                                              привет! а есть отдельный .css для этого меню? выложи плиз))
                                                                                                              1. Александр Мальцев
                                                                                                                28 мая 2016, 13:05
                                                                                                                Вот сборка состоящая из одного компонента navbar:
                                                                                                                getbootstrap.com/customize/?id=e4ae3166f551d396cc928acf43d4d66a

                                                                                                                В конце страницы нажми на кнопку «Compile and Download». В архиве будут 2 файла (bootstrap.css и bootstrap.js). Их необходимо подключить к странице.
                                                                                                              2. Руслан
                                                                                                                18 мая 2016, 14:14
                                                                                                                И вопрос туда же. Хочу сделать иконку большего размера, но меню при этом растягивается по высоте, остальные пункты меню смещаются относительно пункта с иконкой. Как это можно исправить, не увеличивая текущей высоты navbar, и выравнять остальные пункты?
                                                                                                                1. Александр Мальцев
                                                                                                                  19 мая 2016, 13:34
                                                                                                                  Например, иконку размером 30px:
                                                                                                                  .menu-item-14 a {
                                                                                                                    height: 50px !important;
                                                                                                                    line-height: 50px !important;
                                                                                                                    padding-top: 0px !important;
                                                                                                                    padding-bottom: 0px !important;
                                                                                                                  } 
                                                                                                                  .menu-item-14 a:before {
                                                                                                                    font-family: FontAwesome;
                                                                                                                    content: "\f0ac";
                                                                                                                    padding-right: 7px;
                                                                                                                    font-weight: normal;
                                                                                                                    font-size: 30px;
                                                                                                                    vertical-align: middle;
                                                                                                                  }
                                                                                                                  
                                                                                                                2. Руслан
                                                                                                                  18 мая 2016, 14:10
                                                                                                                  Здравствуйте Александр. Помогите пожалуйста разобраться с иконками в меню. Есть пункт с выпадающим списком, ему задаю иконку, но она наследуется всеми вложенными подпунктами. Как сделать иконку только для текущего пункта?
                                                                                                                  .menu-item-14 a:before {
                                                                                                                      font-family: FontAwesome;
                                                                                                                      content: "\f0ac";
                                                                                                                      padding-right: 7px;
                                                                                                                      font-weight: normal;
                                                                                                                  }
                                                                                                                  1. Александр Мальцев
                                                                                                                    19 мая 2016, 13:38
                                                                                                                    Измени, чтобы использовалась только на детей:
                                                                                                                    .menu-item-14>a:before {
                                                                                                                        font-family: FontAwesome;
                                                                                                                        content: "\f0ac";
                                                                                                                        padding-right: 7px;
                                                                                                                        font-weight: normal;
                                                                                                                    }
                                                                                                                    
                                                                                                                    1. Руслан
                                                                                                                      19 мая 2016, 15:10
                                                                                                                      Спасибо! Все получилось :)
                                                                                                                  2. Никита
                                                                                                                    18 мая 2016, 11:31
                                                                                                                    Здравствуйте, Александр!

                                                                                                                    Сейчас делаю сайт (использую Bootstrap), в котором присутствует полоска адаптивного меню, при нажатии на пункты обрабатывается событие, которое подгружает в блок content необходимую информацию, у предыдущего пункта меню убирает класс active, и добавляет его в пункт, который мы нажали (меняется цвет ссылки пункта).

                                                                                                                    $(".navbar-nav li").click(function(){
                                                                                                                    
                                                                                                                        var current_page = $("li.active")
                                                                                                                    	$(current_page).toggleClass("active");
                                                                                                                    	
                                                                                                                    	var navbar = $(".collapse")
                                                                                                                    	
                                                                                                                        var page = $("a",this).attr("href");
                                                                                                                        var content_id = page.split('.')[0];
                                                                                                                    	
                                                                                                                        $(".content").attr("id", content_id);
                                                                                                                        $(".content").load(page);
                                                                                                                    	
                                                                                                                    	return false;
                                                                                                                    	
                                                                                                                        $(this).toggleClass("active");
                                                                                                                        
                                                                                                                    });
                                                                                                                    
                                                                                                                    И вот я столкнулся с двумя проблемами:
                                                                                                                    1) active не присваивается пунктам меню при нажатии, хотя контент подгружается.
                                                                                                                    2) Так же не получается сделать, что бы меню сворачивалось при нажатии на пункт (в мобильной версии)
                                                                                                                    Вариант который вы предложили выше с $(".navbar-collapse").collapse('hide'); не сработал.

                                                                                                                    <div class="navbar navbar-default" role="navigation">
                                                                                                                    	<div class="container-fluid">
                                                                                                                    		<div class="navbar-header">
                                                                                                                    			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                                                                                                    				<span class="sr-only">Открыть навигацию</span>
                                                                                                                    				<span class="icon-bar"></span>
                                                                                                                    				<span class="icon-bar"></span>
                                                                                                                    				<span class="icon-bar"></span>
                                                                                                                    			</button>
                                                                                                                    			<a class="navbar-brand" href="#">
                                                                                                                    				<div class="mainlogo"></div>
                                                                                                                    			</a>
                                                                                                                    		</div>
                                                                                                                    		<div class="navbar-collapse collapse">
                                                                                                                    			<nav class="nav navbar-nav">
                                                                                                                    				<li class="active"><a href="main.html">Главная</a></li>
                                                                                                                    				<li><a href="#">Наши клиенты</a></li>
                                                                                                                    				<li><a href="services.html">Услуги</a></li>
                                                                                                                    				<li><a href="#">Оборудование</a></li>
                                                                                                                    				<li class="hidden-xs"><a href="#">Сертификаты</a></li>
                                                                                                                    				<li><a href="#">Контакты</a></li>
                                                                                                                    			</nav>
                                                                                                                    		</div>
                                                                                                                    	</div>			
                                                                                                                    </div>
                                                                                                                    
                                                                                                                    не могли бы вы предложить какие-нибудь способы решения этих проблем. Заранее спасибо)
                                                                                                                    1. Никита
                                                                                                                      18 мая 2016, 12:46
                                                                                                                      Первый вопрос снимается, там же return не в конце, ужасная оплошность.
                                                                                                                      1. Никита
                                                                                                                        18 мая 2016, 12:59
                                                                                                                        Да и второй тоже, перепробовал кучу всего, но после return ((( Надо было всего лишь сходить пообедать, что бы отвлечься и заметить это.
                                                                                                                        Вот рабочий код
                                                                                                                        $(".navbar-nav > li").click(function(){
                                                                                                                        	
                                                                                                                            var current_page = $(".navbar-nav > li.active")
                                                                                                                        	$(current_page).toggleClass("active");
                                                                                                                        	
                                                                                                                            var page = $("a",this).attr("href");
                                                                                                                            var content_id = page.split('.')[0];
                                                                                                                        	
                                                                                                                            $(".content").attr("id", content_id);
                                                                                                                            $(".content").load(page);
                                                                                                                            $(this).toggleClass("active");
                                                                                                                        	
                                                                                                                            if ($(".collapse").hasClass("in")) {
                                                                                                                            	$(".collapse").collapse("hide");
                                                                                                                            }
                                                                                                                            return false;
                                                                                                                        });
                                                                                                                        
                                                                                                                    2. Артур
                                                                                                                      14 мая 2016, 17:04
                                                                                                                      Спасибо! Получилось, добавив указанный вами код в .js, в css добавил — .navbar-nav > li.active > a {
                                                                                                                      color: #fff;
                                                                                                                      background-color: #012B53;
                                                                                                                      }

                                                                                                                      Все работает, но можете мне помочь подкорректировать код в function.php, не пойму что в нем дополнить (изменить), что бы получить тот же результат?
                                                                                                                      Код
                                                                                                                      class bootstrap_menu extends Walker_Nav_Menu {
                                                                                                                        private $open_submenu_on_hover;
                                                                                                                        function __construct($open_submenu_on_hover = true) {
                                                                                                                          $this->open_submenu_on_hover = $open_submenu_on_hover;
                                                                                                                        }
                                                                                                                        function start_lvl(&$output, $depth = 0, $args = array()) {
                                                                                                                          $output .= "\n<ul class=\"dropdown-menu\">\n";
                                                                                                                        }
                                                                                                                        function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
                                                                                                                          $item_html = '';
                                                                                                                          parent::start_el($item_html, $item, $depth, $args);
                                                                                                                          if ( $item->is_dropdown && $depth === 0 ) {
                                                                                                                            if (!$this->open_submenu_on_hover) $item_html = str_replace('<a', '<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"', $item_html);
                                                                                                                              $item_html = str_replace('</a>', ' <b class="caret"></b></a>', $item_html);
                                                                                                                          }
                                                                                                                          $output .= $item_html;
                                                                                                                        }
                                                                                                                        function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
                                                                                                                          if ( $element->current ) $element->classes[] = 'active';
                                                                                                                          $element->is_dropdown = !empty( $children_elements[$element->ID] );
                                                                                                                          if ( $element->is_dropdown ) {
                                                                                                                            if ( $depth === 0 ) {
                                                                                                                              $element->classes[] = 'dropdown';
                                                                                                                              if ($this->open_submenu_on_hover) $element->classes[] = 'show-on-hover';
                                                                                                                            } elseif ( $depth === 1 ) {
                                                                                                                              $element->classes[] = 'dropdown-submenu';
                                                                                                                            }
                                                                                                                          }
                                                                                                                          parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
                                                                                                                        }
                                                                                                                      }
                                                                                                                      
                                                                                                                      1. Александр Мальцев
                                                                                                                        16 мая 2016, 12:20
                                                                                                                        Попробуйте использовать следующий код.
                                                                                                                        Код
                                                                                                                        add_filter('nav_menu_css_class', 'add_active_class', 10, 2 );
                                                                                                                        function add_active_class($classes, $item) {
                                                                                                                          if( $item->menu_item_parent == 0 && 
                                                                                                                            in_array( 'current-menu-item', $classes ) ||
                                                                                                                            in_array( 'current-menu-ancestor', $classes ) ||
                                                                                                                            in_array( 'current-menu-parent', $classes ) ||
                                                                                                                            in_array( 'current_page_parent', $classes ) ||
                                                                                                                            in_array( 'current_page_ancestor', $classes )
                                                                                                                            ) {
                                                                                                                            $classes[] = "active";
                                                                                                                          }
                                                                                                                          return $classes;
                                                                                                                        }
                                                                                                                        
                                                                                                                      2. Артур
                                                                                                                        13 мая 2016, 20:57
                                                                                                                        Как сделать, чтобы при активном дочернем меню, родительское было активно (подсвечивалось)
                                                                                                                        1. Александр Мальцев
                                                                                                                          14 мая 2016, 13:01
                                                                                                                          Здравствуйте.
                                                                                                                          Добавить класс active к необходимому пункту меню можно, например, на сервере при генерировании соответствующей страницы с помощью скрипта php. Т.е. когда пользователь нажмет на некоторый пункт меню, он перейдёт на некоторую страницу, которая будет сгенерирована на сервере и соответственно иметь меню с нужным активным пунктом. Здесь необходимо разобраться как Вы получаете меню, и настроить скрипт php.

                                                                                                                          Если Вы просто используете набор статичных страниц, то попробуйте это сделать, например так:
                                                                                                                          $(function(){
                                                                                                                            $('.navbar-nav a').each(function(){
                                                                                                                              if ($(this).prop('href') == window.location.href) {
                                                                                                                                $(this).addClass('active'); 
                                                                                                                                $(this).parents('li').addClass('active');
                                                                                                                              }
                                                                                                                            });
                                                                                                                          });
                                                                                                                          
                                                                                                                        2. Артур
                                                                                                                          13 мая 2016, 20:48
                                                                                                                          Здравствуйте! Подскажите пожалуйста. Имеется подменю 2 уровня. При его просмотре, родительское меню мне удалось сделать подсвеченным.
                                                                                                                          .navbar-nav > li:hover > a {
                                                                                                                          color: #fff;
                                                                                                                          background-color: #0165C2;
                                                                                                                          }
                                                                                                                          Вопрос? А как мне сделать, так что бы при клике на пункт подменю, его родитель оставался подсвеченным. Я как понимаю, это чрез active, но самостоятельно разобраться не получается
                                                                                                                          1. Burboss
                                                                                                                            04 мая 2016, 14:13
                                                                                                                            Отбой. Спасибо
                                                                                                                            1. Burboss
                                                                                                                              04 мая 2016, 11:11
                                                                                                                              Александр, здравствуйте.
                                                                                                                              Благодарю Вас за отличные уроки. Это лучшее, что есть в инете.
                                                                                                                              Вопрос: между брендом и собственно меню надо вставить картинку с телефонным номером.
                                                                                                                              Вставляю, так она, зараза, бегает то вверх, то вниз относительно середины блока.
                                                                                                                              Помогите разобраться, пожалуйста
                                                                                                                              1. Александр Мальцев
                                                                                                                                04 мая 2016, 13:50
                                                                                                                                Здравствуйте, спасибо.
                                                                                                                                Так и вставляйте её после бренда.
                                                                                                                                Например так (телефон в виде текста):
                                                                                                                                <a href="#" class="navbar-brand">Бренд</a>
                                                                                                                                <div style="float: left; height: 50px; padding: 15px 15px; font-size: 18px; line-height: 20px;">Номер телефона</div>
                                                                                                                                
                                                                                                                                Если картинку, то так:
                                                                                                                                <a href="#" class="navbar-brand">Бренд</a>
                                                                                                                                <img src="1.png" style="float: left; height: 50px; padding: 0px 0px; margin-right: 10px;">
                                                                                                                                
                                                                                                                                Если картинка меньше чем 50px, то соответственно добавить отступы.
                                                                                                                                1. Burboss
                                                                                                                                  04 мая 2016, 14:10
                                                                                                                                  Вставил текст «номер телефона», так он залип сверху блока и никак оттуда…
                                                                                                                                  1. Burboss
                                                                                                                                    04 мая 2016, 13:57
                                                                                                                                    Благодарю Вас, Александр.
                                                                                                                                2. OdIUm
                                                                                                                                  28 апреля 2016, 20:40
                                                                                                                                  Здравствуйте. Вновь должен обратиться к Вам за советом.
                                                                                                                                  Создал навигационное меню:
                                                                                                                                  <header id="header">
                                                                                                                                    <div>
                                                                                                                                      <nav class="navbar navbar-default navbar-static-top" role="navigation">
                                                                                                                                        <div class="container-flued">
                                                                                                                                          <div id="logo-box" class="navbar-header">
                                                                                                                                            <button class="navbar-toggle" data-target="#br-main-navbar-collapse" data-toggle="collapse" type="button">
                                                                                                                                             <a class="navbar-brand" href="/">Сайт</a>
                                                                                                                                          </div>
                                                                                                                                          <div id="br-main-navbar-collapse" class="collapse navbar-collapse">
                                                                                                                                            ...
                                                                                                                                          </div>
                                                                                                                                        </div>  
                                                                                                                                      </nav>
                                                                                                                                    </div>
                                                                                                                                  </header>
                                                                                                                                  
                                                                                                                                  После него дугой контент («витрина»).
                                                                                                                                  Проблема в том, что между меню и навигационным меню образовывается пробел (отступ). Firebug подсвечивает его желтым и относит к тегу nav.
                                                                                                                                  Другие элементы внутри тега nav (ссылки, бренд) подсвечиваются правильно и занимают отведенную им высоту. Даже header, в котором расположен nav также занимает правильную высоту, судя по firebug.
                                                                                                                                  Из за чего это может быть? Как убрать этот отступ?
                                                                                                                                  Изображение
                                                                                                                                  1. Александр Мальцев
                                                                                                                                    29 апреля 2016, 11:21
                                                                                                                                    Это отступ navbar.
                                                                                                                                    Если он Вам не нужен, то сделайте так:
                                                                                                                                    /* CSS */
                                                                                                                                    .navbar {
                                                                                                                                      margin-bottom: 0px;
                                                                                                                                    }
                                                                                                                                    
                                                                                                                                  2. Михаил
                                                                                                                                    26 апреля 2016, 22:56
                                                                                                                                    Здравствуйте. Как и все мы, за советом. После подключения плагина affix к меню, один из блоков оказался выше и при прокрутке залазит на меню. Не подскажите в чём беда? HTML блока обычный: container -> row -> две колонки. Вот стили:
                                                                                                                                    .about {
                                                                                                                                    height: 750px;
                                                                                                                                    }
                                                                                                                                    .about-left-container {
                                                                                                                                    background-image: url(../images/maza.jpg);
                                                                                                                                    background-repeat: no-repeat;
                                                                                                                                    background-position: center;
                                                                                                                                    height: 750px;
                                                                                                                                    }
                                                                                                                                    .about-right-container {
                                                                                                                                    background: #ffffe5;
                                                                                                                                    height: 750px;
                                                                                                                                    }
                                                                                                                                    1. Александр Мальцев
                                                                                                                                      27 апреля 2016, 11:27
                                                                                                                                      Здравствуйте, посмотрите ответ здесь:
                                                                                                                                      Как правильно зафиксировать колонку на Bootstrap?

                                                                                                                                      Вы добавили стили, которые говорят только о фоне элементов, но не раскрывают их суть.
                                                                                                                                      Добавлять affix к элементам можно либо с помощью data-атрибутов, либо с помощью JavaScript.
                                                                                                                                      1. С помощью data-атрибутов:
                                                                                                                                      <div id="myAffix" data-spy="affix" data-offset-top="100">
                                                                                                                                        ...
                                                                                                                                      </div>
                                                                                                                                      
                                                                                                                                      2. С помощью JavaScript:
                                                                                                                                      $('#myAffix').affix({
                                                                                                                                        offset: {
                                                                                                                                          top: 100
                                                                                                                                        }
                                                                                                                                      })
                                                                                                                                      
                                                                                                                                      В данном примере под цифрой 100 понимается смещение (скролл) от экрана. При достижении этой цифры, элемент открепляется от экрана. Теперь его положение и размеры Вы должны указать. Задается это с помощью настройки класса .affix. Например положение от верха 150px, ширина 250px и т.д.
                                                                                                                                      .affix {
                                                                                                                                        top: 100px;
                                                                                                                                        width: 250px;
                                                                                                                                      }
                                                                                                                                      
                                                                                                                                      Наверно Вы не настроили класс .affix.
                                                                                                                                      1. Михаил
                                                                                                                                        27 апреля 2016, 13:26
                                                                                                                                        Извините ещё раз, я наверное не правильно объяснил. У меня при прокрутке блок (ABOUT) наезжает на меню и оно пропадает, а когда этот блок прокручивается меню появляется и с последующими блоками уже нормально. Предполагаю что стили не правильно установил. Может взгляните?
                                                                                                                                        _http://plnkr.co/edit/VU2bROs0OVpLFzryL056?p=preview
                                                                                                                                        1. Михаил
                                                                                                                                          27 апреля 2016, 20:10
                                                                                                                                          Спасибо, разобрался. Но сейчас появилась под меню полоса примерно в 10px. Ну никак не могу с ней справиться. Может подскажите как от неё избавиться? Спасибо
                                                                                                                                          Изображение
                                                                                                                                          1. Александр Мальцев
                                                                                                                                            29 апреля 2016, 11:26
                                                                                                                                            Скорее всего, это отступ. Измените его на значение 0px.
                                                                                                                                            1. Михаил
                                                                                                                                              02 мая 2016, 07:22
                                                                                                                                              Как всё просто :) Спасибо
                                                                                                                                    2. OdIUm
                                                                                                                                      25 апреля 2016, 14:29
                                                                                                                                      Добрый день.

                                                                                                                                      Я версткой раньше не занимался, но появилась такая необходимость. Пытаюсь с помощью navbar сверстать адаптивное меню для сайта.

                                                                                                                                      Возможно Вы сможете мне помочь или направить)

                                                                                                                                      Есть две проблемы:

                                                                                                                                      1. Не пойму как настроить адаптивность при изменении разрешения.

                                                                                                                                      Мое меню выглядит так:

                                                                                                                                      Брэнд Меню1 Меню2 Меню3 Вход Регистрация

                                                                                                                                      Вход и регистрация привязаны к правому краю.
                                                                                                                                      В момент изменения разрешения, когда пункты меню уже не влазят в одну строку, происходит переход на новую. Сначала туда слетают пункты Вход и Регистрация (при этом все еще прижатые к правому краю). Т.е новая строка пустая и в самом конце два пункта.

                                                                                                                                      Потом Бренд остается на 1й строчке, пункты меню на второй, а Вход и Регистрация на 3ю падает.

                                                                                                                                      И только потом все это сворачивается в гамбургер.

                                                                                                                                      Выглядит ужасно, а как поправить не знаю.
                                                                                                                                      В идеале либо чтобы размер шрифта уменьшался (до заданного минимума) и меню оставалось в одну строку, либо чтобы сразу сворачивалось в гамбургер, как только переставало помещаться в одну строку.

                                                                                                                                      2. Когда меню свернуто в гамбургер, Вход и Регистрация наезжают на другие пункты меню.
                                                                                                                                      Плюс включается прокрутка, так как не все пункты помещаются в 1 экран.


                                                                                                                                      Буду рад за совет где поискать и что почитать про настройку адаптации.
                                                                                                                                      1. Александр Мальцев
                                                                                                                                        25 апреля 2016, 15:51
                                                                                                                                        Необходимо подобрать точку сворачивания navbar. Т.е. ширину экрана при котором меню будет сворачиваться в мобильный вид.
                                                                                                                                        Наиболее просто это сделать на странице _http://getbootstrap.com/customize/#grid-system. На ней необходимо изменить значение переменной @grid-float-breakpoint на необходимое значение (например, 1000px). Данная установка будет означать, что меню navbar будет иметь мобильный вид уже с 999px. После этого необходимо скомпилировать и скачать сборку.
                                                                                                                                        Можете также изменить и размер шрифта:
                                                                                                                                        .navbar-collapse {
                                                                                                                                          font-size: 12px;
                                                                                                                                        }
                                                                                                                                        
                                                                                                                                        Для выравнивания элементов по правому краю используйте класс navbar-right.
                                                                                                                                        1. Ильнур
                                                                                                                                          12 августа 2016, 18:13
                                                                                                                                          А где можно поправить этот параметр в уже загруженном бутстрапе? поиск в файле bootstrap.min.css по имени grid-float-breakpoint ничего не дает(
                                                                                                                                          1. Александр Мальцев
                                                                                                                                            14 августа 2016, 11:31
                                                                                                                                            grid-float-breakpoint — это переменная LESS. Разработчики Bootstrap 3 сначало пишут стили на LESS, а потом преобразуют в CSS. LESS — это язык стилей, который облегчает написание CSS и его поддержку, т.к. обладает более богатыми возможностями чем CSS. В CSS нет grid-float-breakpoint, она есть только в LESS.

                                                                                                                                            Скорее всего Вам предётся слишком много поправлять (добавлять в свой файл CSS). Если это необходимо, то можете это сделать сами:
                                                                                                                                            1. Скачать готовую сборку Bootstrap.
                                                                                                                                            2. Сделать кастомную сборку (с необходимым grid-float-breakpoint) и скачать её.
                                                                                                                                            3. Сравнить 2 файла bootstrap.css (например, с помощью какого-либо инструмента).
                                                                                                                                            4. Получить отличия и добавить их в свой файл CSS.
                                                                                                                                          2. OdIUm
                                                                                                                                            25 апреля 2016, 19:48
                                                                                                                                            Спасибо большое! Попробую.
                                                                                                                                        2. Марина
                                                                                                                                          21 апреля 2016, 17:35
                                                                                                                                          Спасибо за ваши уроки! Это лучшее, что есть в рунете по Бутстрапу.

                                                                                                                                          Пытаюсь освоить адаптированную верстку, наконец стало что-то получаться. )

                                                                                                                                          У меня почему-то дефолтная панель навигации (классы navbar и navbar-default) прилипает к верхней границе окна, хотя перед ней находится шапка. Удалось избавиться от этого только после удаления в классе navbar «position: relative». Как поняла, класс navbar-static-top просто даёт смещение. Наверно, можно без него обойтись?

                                                                                                                                          И ещё вопрос. У вас в коде дефолтной панели data-target="#navbarCollapse" и div id=«navbarCollapse». В стилях версии 3.3.6 нету navbarCollapse. Может быть, это из устаревшей версии?

                                                                                                                                          1. Александр Мальцев
                                                                                                                                            22 апреля 2016, 17:54
                                                                                                                                            Марина, спасибо.
                                                                                                                                            Меню navbar у Вас скорее расположено в каком-то другом блоке, который имеет position отличную от static (например: fixed). Поэтому у Вас получается не так как хочется. Изменять position:relative не стоит, т.к. в этом случае у Вас не будут правильно отображаться выпадающие меню. Правильное решение в этой ситуации — это создать правильную разметку.
                                                                                                                                            navbarCollapse — это просто идентификатор, который можно указать любым. Он нужен для того, чтобы в мобильной версии меню можно было вызвать по кнопке.
                                                                                                                                          2. Тимур
                                                                                                                                            20 апреля 2016, 23:03
                                                                                                                                            Извиняюсь за назойливость, но возник тут же ещё вопрос. Как сделать такое меню, как в примере выше, в маленьком окне? У меня появляется скролл и выпадающее меню ложится под контент
                                                                                                                                            1. Александр Мальцев
                                                                                                                                              22 апреля 2016, 17:38
                                                                                                                                              Перекрытие элементов определяется свойством z-index. Следовательно, другой контент имеет более высокое значение, чем оно установлено у выпадающего меню. Значение z-index по умолчанию у dropdown-menu составляет 1000.
                                                                                                                                              1. Тимур
                                                                                                                                                23 апреля 2016, 11:37
                                                                                                                                                Спасибо Вам большое! Все получилось)
                                                                                                                                            2. Тимур
                                                                                                                                              20 апреля 2016, 22:46
                                                                                                                                              И ещё вопрос, как в выпадающем меню сделать разделительные полоски в том же примере
                                                                                                                                              1. Александр Мальцев
                                                                                                                                                22 апреля 2016, 17:30
                                                                                                                                                Разделительные полоски можно добавить так:
                                                                                                                                                .dropdown-menu li {
                                                                                                                                                    border-bottom: 1px solid #e5e5e5;;
                                                                                                                                                }
                                                                                                                                                
                                                                                                                                              2. Тимур
                                                                                                                                                20 апреля 2016, 22:44
                                                                                                                                                Здравствуйте! Подскажите пожалуйста, как сделать что бы при переходе на пункт выпадающего меню, основной пункт меню, под которым оно находиться становилось нужного цвета? И ещё похожий вопрос, когда переходишь из пункта выпадающего меню в пункт субменю, что бы пункт выпадающего меню оставался подсвеченным. Все как в примере _http://visavik.com. Bootstrap 3
                                                                                                                                                1. Александр Мальцев
                                                                                                                                                  22 апреля 2016, 17:24
                                                                                                                                                  1. Цвет открытого пункта меню:
                                                                                                                                                  .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
                                                                                                                                                    /* цвет */
                                                                                                                                                    color: #555;
                                                                                                                                                    /* фон */
                                                                                                                                                    background-color: #e7e7e7;
                                                                                                                                                  }
                                                                                                                                                  
                                                                                                                                                  2. По умолчанию Bootstrap 3 имеет двухуровневое меню.
                                                                                                                                                  1. Тимур
                                                                                                                                                    23 апреля 2016, 22:28
                                                                                                                                                    весь день ищу, ничего не получается. Почему когда нажимаю на пункт dropdown меню, основной пункт не меняет цвет:(
                                                                                                                                                    1. Тимур
                                                                                                                                                      23 апреля 2016, 11:50
                                                                                                                                                      в 1 пункте не получилось что то, перехожу в пункт подменю, ничего не проиходит
                                                                                                                                                  2. александр морозов
                                                                                                                                                    19 апреля 2016, 15:35
                                                                                                                                                    Добрый день, действительно хорошая статья, спасибо.
                                                                                                                                                    Никак не могу решить проблему, и у Вас тоже ничего не написано.
                                                                                                                                                    Если меню прижать к низу, то после того как оно «схлопывается», при наведении на гамбургер оно пытается раскрыться вниз, а там конец страницы и ничего не происходит. Можно как-то сделать, чтобы оно раскрывалось вверх?
                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                      20 апреля 2016, 13:39
                                                                                                                                                      Здравствуйте, меню navbar, как Вы описали выше, так и работает. Дополнительно ничего настраивать не требуется.
                                                                                                                                                      <nav class="navbar navbar-default navbar-fixed-bottom">
                                                                                                                                                      ...
                                                                                                                                                      </nav>
                                                                                                                                                      
                                                                                                                                                      Если у Вас что-то не работает, то проверьте, есть ли ошибки (в Chrome — клавиша F12, вкладка Console).
                                                                                                                                                    2. igor
                                                                                                                                                      23 марта 2016, 16:40
                                                                                                                                                      Огромное спасибо!
                                                                                                                                                      Ваш сайт лучший!
                                                                                                                                                      И помощь реальная!
                                                                                                                                                      1. igor
                                                                                                                                                        22 марта 2016, 23:05
                                                                                                                                                        Здравствуйте!
                                                                                                                                                        При добавлении скрипта взятого из второго ответа за 17 декабря вылезает проблема!
                                                                                                                                                        — при переключении с одного пункта меню на другой проскакивает горизонтальная прокрутка, прямо на месте меню. При третьем переключении этот эффект пропадает, до обновления страницы.
                                                                                                                                                        Скрипт вынесен в отдельный файл.
                                                                                                                                                        //при нажатии на ссылку
                                                                                                                                                        $(".navbar-collapse a").click(function() {
                                                                                                                                                          //если она не имеет класс dropdown-toggle
                                                                                                                                                          if (!$(this).hasClass("dropdown-toggle")) {
                                                                                                                                                            //то закрыть меню
                                                                                                                                                            $(".navbar-collapse").collapse('hide');
                                                                                                                                                          }
                                                                                                                                                        });
                                                                                                                                                        Cкрин прилагаю:
                                                                                                                                                        Скриншот
                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                          23 марта 2016, 11:48
                                                                                                                                                          Здравствуйте!
                                                                                                                                                          Покажите Вашу ситуацию на jsfiddle или на чём-то подобном.
                                                                                                                                                          Так как у меня ничего такого не возникает.
                                                                                                                                                          1. igor
                                                                                                                                                            23 марта 2016, 15:06
                                                                                                                                                            А можно я вам на почту сброшу шаблон с которым я работаю?
                                                                                                                                                        2. Андрей
                                                                                                                                                          19 марта 2016, 23:47
                                                                                                                                                          Добрый день. Помогите, пожалуйста, нужно разместить текст в навигационной панели (по сути это заголовок страницы), чтобы он был по центру оставшегося свободного пространства после названия сайта, меню и прочих элементов.
                                                                                                                                                          Фото
                                                                                                                                                          1. Александр Мальцев
                                                                                                                                                            23 марта 2016, 11:39
                                                                                                                                                            Это можно выполнить так.
                                                                                                                                                            Добавить в CSS:
                                                                                                                                                            .navbar-default {
                                                                                                                                                              text-align:center;
                                                                                                                                                            }
                                                                                                                                                            .navbar-center {
                                                                                                                                                              display: inline-block;
                                                                                                                                                              float: none; 
                                                                                                                                                            }
                                                                                                                                                            .navbar-center>span {
                                                                                                                                                              position: relative;
                                                                                                                                                              display: block;
                                                                                                                                                              padding: 15px 15px;
                                                                                                                                                            }
                                                                                                                                                            
                                                                                                                                                            HTML-код:
                                                                                                                                                            <nav class="navbar navbar-default">
                                                                                                                                                              <div class="container-fluid">
                                                                                                                                                              ...
                                                                                                                                                              </div>
                                                                                                                                                            
                                                                                                                                                              <div class="collapse navbar-collapse" id="example-navbar">
                                                                                                                                                                <ul class="nav navbar-nav">
                                                                                                                                                                ...  
                                                                                                                                                                </ul>
                                                                                                                                                                <!-- Блок, содержащий текст, который необходимо отобразить по центру -->
                                                                                                                                                                <div class="nav navbar-nav navbar-center">
                                                                                                                                                                  <span>Текст по центру</span>
                                                                                                                                                                </div>
                                                                                                                                                                <!-- Конец блока -->
                                                                                                                                                                <ul class="nav navbar-nav navbar-right">
                                                                                                                                                                ...
                                                                                                                                                                </ul>
                                                                                                                                                                </div>
                                                                                                                                                              </div>
                                                                                                                                                            </nav>
                                                                                                                                                            
                                                                                                                                                            1. Андрей
                                                                                                                                                              28 марта 2016, 17:30
                                                                                                                                                              Спасибо большое, помогло!
                                                                                                                                                          2. Игорь
                                                                                                                                                            18 марта 2016, 01:01
                                                                                                                                                            Здравствуйте! помогите пожалуйста! Нужно сделать меню fixed-top, но при просмотре на мобильном экране, чтобы оно пропадало и появлялось только при переходе к началу страницы. Заранее спасибо.
                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                              19 марта 2016, 10:55
                                                                                                                                                              Здравствуйте.
                                                                                                                                                              Насколько я понимаю, Вам необходимо на sm, md и lg отображать меню с классом navbar-fixed-top, а на xs без него.
                                                                                                                                                              $(function(){
                                                                                                                                                                var toggleNavbarFixed = function() {
                                                                                                                                                                  $navbar = $('.navbar');
                                                                                                                                                                  if ($(window).width()>=768) {
                                                                                                                                                                    if (!$navbar.hasClass('navbar-fixed-top')) {
                                                                                                                                                                      $navbar.addClass('navbar-fixed-top');
                                                                                                                                                                    }
                                                                                                                                                                  }
                                                                                                                                                                  else {
                                                                                                                                                                    if ($navbar.hasClass('navbar-fixed-top')) {
                                                                                                                                                                      $navbar.removeClass('navbar-fixed-top');
                                                                                                                                                                    }
                                                                                                                                                                  }
                                                                                                                                                                }
                                                                                                                                                                toggleNavbarFixed();
                                                                                                                                                                $(window).resize(function(){
                                                                                                                                                                  toggleNavbarFixed();
                                                                                                                                                                });
                                                                                                                                                              });
                                                                                                                                                              
                                                                                                                                                              1. igor
                                                                                                                                                                19 марта 2016, 21:00
                                                                                                                                                                Спасибо! Прекрасно работает!
                                                                                                                                                                Новая проблема!
                                                                                                                                                                При развернутом меню, если нажать на кнопку оно не сворачивается. Мышкой еще получается по двойному или тройному клику, а вот пальцем не всегда удается. Образец взят у вас из урока. Заранее спасибо.
                                                                                                                                                                1. igor
                                                                                                                                                                  20 марта 2016, 00:58
                                                                                                                                                                  Спасибо! ошибку нашел сам.
                                                                                                                                                                  1. Сергей
                                                                                                                                                                    13 апреля 2016, 21:30
                                                                                                                                                                    Привет. Столкнулся с такой же проблемой. Если не трудно, поделись, пожалуйста, какую именно ошибку ты нашел. Бьюсь — не могу найти. Спасибо тебе заранее.
                                                                                                                                                                    1. igor
                                                                                                                                                                      16 апреля 2016, 23:08
                                                                                                                                                                      Честно! Уже не помню, потому что ошибка была элементарная (синтаксическая или закрытие тега потерял), а может свои изменения css убрал, чтобы конфликта с bootstrap не было…
                                                                                                                                                                      Извини…
                                                                                                                                                            2. Иван Хорошилов
                                                                                                                                                              12 марта 2016, 15:47
                                                                                                                                                              Добрый день!
                                                                                                                                                              Можно попросить совета, как сделать подсветку названия той категории, в которой нахожусь в данный момент? В какую категорию бы не зашел, или ничего не подсвечивается, или активен link4…
                                                                                                                                                              Не получается с таким кодом:
                                                                                                                                                              	<nav role="navigation" class="navbar navbar-default">
                                                                                                                                                                <!-- Brand and toggle get grouped for better mobile display -->
                                                                                                                                                                <div class="container">
                                                                                                                                                                <div class="navbar-header">
                                                                                                                                                                  <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                                                                                                                                                                    <span class="sr-only">brand</span>
                                                                                                                                                                    <span class="icon-bar"></span>
                                                                                                                                                                    <span class="icon-bar"></span>
                                                                                                                                                                    <span class="icon-bar"></span>
                                                                                                                                                                  </button>
                                                                                                                                                                  <a href="#" class="navbar-brand">brand</a>
                                                                                                                                                                </div>
                                                                                                                                                                <!-- Collection of nav links, forms, and other content for toggling -->
                                                                                                                                                                <div id="navbarCollapse" class="collapse navbar-collapse">
                                                                                                                                                                  <ul class="nav navbar-nav">
                                                                                                                                                                    <li class="active"><a href="#">link1</a></li>
                                                                                                                                                                    <li><a href="#">link2</a></li>
                                                                                                                                                                    <li><a href="#">link3</a></li>
                                                                                                                                                              	  <li><a href="#">link4</a></li>
                                                                                                                                                              	  <li><a href="#">link5</a></li>
                                                                                                                                                              	  <li><a href="#">link6</a></li>
                                                                                                                                                                  </ul>
                                                                                                                                                                </div></div>
                                                                                                                                                              </nav>
                                                                                                                                                              
                                                                                                                                                              1. Александр Мальцев
                                                                                                                                                                15 марта 2016, 13:46
                                                                                                                                                                Это действие обычно выполняется на сервере, посредством добавления класса active к нужному пункту меню.
                                                                                                                                                              2. User
                                                                                                                                                                10 марта 2016, 21:04
                                                                                                                                                                А как скопировать только верхнее меню к себе на сайт? На своем сайте нравится все, кроме этого меню))
                                                                                                                                                                В html разобрался, а вот из css bootstrap скопировал в свой css все строчки с navbar, и меню в результате сломалось)
                                                                                                                                                                Так же интересно, js файлы тоже копировать для работы только меню?
                                                                                                                                                                1. Александр Мальцев
                                                                                                                                                                  11 марта 2016, 15:13
                                                                                                                                                                  Перейти на страницу getbootstrap.com/customize/, на которой можно выбрать из Bootstrap только то что нужно.
                                                                                                                                                                  Для navbar понадобится как минимум:
                                                                                                                                                                  в Less files:
                                                                                                                                                                  — из раздела Components: Navs, Navbar.
                                                                                                                                                                  — из раздела JavaScript components: Component animations (includes Collapse), Dropdown (если необходимы выпадающие списки).
                                                                                                                                                                  в jQuery plugins: Dropdown, Collapse.

                                                                                                                                                                  После этого нажать Compile and Download и получить необходимые CSS и JS файлы.
                                                                                                                                                                  Перед подключением из CSS файла можно удалить общие стили.
                                                                                                                                                                2. Дмитрий
                                                                                                                                                                  23 февраля 2016, 09:00
                                                                                                                                                                  Здравствуйте! помогите пожалуйста советом. Решил сделать навигацию внутри страницы на якорях, но из-за плавающего навбара на Bootstrap3, столкнулся с проблемой — навбар закрывает 50 пикселей нужного пространства. Для боди прописал паддинг-топ:50пкс, помогло.
                                                                                                                                                                  Затем использовал ваш пример:
                                                                                                                                                                  #preim:before { 
                                                                                                                                                                    display: block; 
                                                                                                                                                                    content: " "; 
                                                                                                                                                                    padding-top: -50px; 
                                                                                                                                                                    height: 50px; 
                                                                                                                                                                    visibility: hidden; 
                                                                                                                                                                  }
                                                                                                                                                                  
                                                                                                                                                                  Проблема тоже решилась, но тут же породилась новая — появляется разрыв в 50 пикселей. И как назло в таком месте, где никак не спрячешь, белый фон. Есть конечно вариант сделать очень широкой полосу с текстом, но это уже крайности. Может есть какой ещё вариант избавиться от этого? Я вот подумываю в сторону z-index, но пока ещё особо не понимаю как сделать, возможно и ошибаюсь.
                                                                                                                                                                  Изображение
                                                                                                                                                                  1. Стас
                                                                                                                                                                    04 сентября 2016, 18:56
                                                                                                                                                                    как решили эту проблему?
                                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                                      05 сентября 2016, 11:54
                                                                                                                                                                      А в чём проблема?
                                                                                                                                                                      Например, добавляете ко всем необходимым заголовкам класс section:
                                                                                                                                                                      <h2 class="section" id="h2">...</h2>
                                                                                                                                                                      <h3 class="section" id="h3">...</h3>
                                                                                                                                                                      
                                                                                                                                                                      В CSS прописываете код:
                                                                                                                                                                      body { padding-top: 60px; }
                                                                                                                                                                      .section:before { 
                                                                                                                                                                        display: block; 
                                                                                                                                                                        content: " "; 
                                                                                                                                                                        margin-top: -60px; 
                                                                                                                                                                        height: 60px; 
                                                                                                                                                                        visibility: hidden; 
                                                                                                                                                                      }
                                                                                                                                                                      
                                                                                                                                                                      Если необходимо изменить отступ, то изменяете число 60 на какое-нибудь другое.

                                                                                                                                                                      Кроме этого, если у Вас блок начинается с заголовка, то он имеет margin-top: 20px. Чтобы его компенсировать необходимо уменьшить высоту на 20px и соответственно назначить этому заголовку другой класс (например, section1):
                                                                                                                                                                      .section1:before {
                                                                                                                                                                        display: block; 
                                                                                                                                                                        content: " "; 
                                                                                                                                                                        margin-top: -60px; 
                                                                                                                                                                        height: 40px; 
                                                                                                                                                                        visibility: hidden; 
                                                                                                                                                                      }
                                                                                                                                                                      
                                                                                                                                                                  2. Александр
                                                                                                                                                                    15 февраля 2016, 15:26
                                                                                                                                                                    Здравствуйте.
                                                                                                                                                                    1. а как сделать еще 1 уровень вложенности?
                                                                                                                                                                    2. а как сделать, чтобы dropdown открывалось по наведению указателя, а не по щелчку?
                                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                                      17 февраля 2016, 12:07
                                                                                                                                                                      Попробуйте SmartMenus. Данное меню полностью адаптивное и многоуровневое.
                                                                                                                                                                      Страница проекта:
                                                                                                                                                                      _http://www.smartmenus.org/
                                                                                                                                                                      Демо:
                                                                                                                                                                      _http://vadikom.github.io/smartmenus/src/demo/
                                                                                                                                                                      Bootstrap Second Level:
                                                                                                                                                                      _http://codepen.io/anon/pen/BjQqPO
                                                                                                                                                                    2. Иван
                                                                                                                                                                      26 января 2016, 15:11
                                                                                                                                                                      Такой вопрос. Если нужно чтобы изначально меню располагалось под шапкой, и только потом как начинаем прокручивать страницу вниз оно фиксировалось сверху.Как это сделать?
                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                        27 января 2016, 12:16
                                                                                                                                                                        Это делается с помощью плагина Bootstrap Affix.
                                                                                                                                                                        Код HTML:
                                                                                                                                                                        <div style="height:100px;">Шапка</div>
                                                                                                                                                                        <nav id="navbar" class="navbar navbar-default" data-spy="affix" data-offset-top="100">
                                                                                                                                                                        ...
                                                                                                                                                                        </nav>
                                                                                                                                                                        
                                                                                                                                                                        Код CSS:
                                                                                                                                                                        #navbar {
                                                                                                                                                                          top:0;
                                                                                                                                                                          width:100%;
                                                                                                                                                                        }
                                                                                                                                                                        
                                                                                                                                                                        1. Сергей
                                                                                                                                                                          01 февраля 2017, 17:55
                                                                                                                                                                          При этом на navbar накладываются все элементы сайта, если выставить ему z-index проблема решается, но он начинает накладываться в свою очередь поверх overlay… как быть в этом случае?
                                                                                                                                                                          1. Александр Мальцев
                                                                                                                                                                            03 февраля 2017, 17:09
                                                                                                                                                                            Установить navbar значение z-index больше чем у других элементов сайта, но меньше чем у overlay. Или overlay установить большее значение z-index.
                                                                                                                                                                            1. Сергей
                                                                                                                                                                              04 февраля 2017, 09:18
                                                                                                                                                                              Спасибо за комментарий! я это понимал, но z-index оверлею не выставлялся. Может кому пригодится — drupal overley по умолчанию z-index 500
                                                                                                                                                                      2. Федор
                                                                                                                                                                        25 января 2016, 12:22
                                                                                                                                                                        Здравствуйте. Не получается скорректировать css свойства navbar. Пытаюсь поменять фон при наведении (хочу отменить его совсем).
                                                                                                                                                                        Код HTML:
                                                                                                                                                                        <div class="bs-example">
                                                                                                                                                                          <nav id="myNavbar" role="navigation">
                                                                                                                                                                            <div class="container">
                                                                                                                                                                               <ul class="nav navbar-nav">
                                                                                                                                                                                 <li><a href="#">Главная</a></li>
                                                                                                                                                                                <li><a href="#">Профайл</a></li>
                                                                                                                                                                                 <li class="dropdown">
                                                                                                                                                                                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Галерея</a>
                                                                                                                                                                                      <ul class="dropdown-menu">
                                                                                                                                                                                         <li><a href="#">Пункт 1</a></li>
                                                                                                                                                                                          <li><a href="#">Пункт 2</a></li>
                                                                                                                                                                                         <li><a href="#">Пункт 3</a></li>
                                                                                                                                                                                      </ul>
                                                                                                                                                                                    </li>
                                                                                                                                                                                  </ul>
                                                                                                                                                                                </div>
                                                                                                                                                                               </nav>
                                                                                                                                                                             </div>
                                                                                                                                                                        

                                                                                                                                                                        Пытаюсь в css сделать так
                                                                                                                                                                        CSS код:
                                                                                                                                                                        .navbar-nav>.active>a,
                                                                                                                                                                        .navbar-nav>.active>a:hover,
                                                                                                                                                                        .navbar-nav>.active>a:focus{
                                                                                                                                                                        color: green;
                                                                                                                                                                        background-color: none;
                                                                                                                                                                        }
                                                                                                                                                                        
                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                          25 января 2016, 13:01
                                                                                                                                                                          Здравствуйте, Фёдор.
                                                                                                                                                                          В CSS Вы пытаетесь это сделать для активного пункта меню, а я как понимаю, Вам необходимо это сделать для всех. Кроме этого, у background-color нет значения none.
                                                                                                                                                                          Вам необходимо изменить код CSS на следующий:
                                                                                                                                                                          .navbar-nav>li>a:hover,
                                                                                                                                                                          .navbar-nav>li>a:focus {
                                                                                                                                                                            color: green;
                                                                                                                                                                            background-color: transparent;
                                                                                                                                                                          }
                                                                                                                                                                          
                                                                                                                                                                          1. Федор
                                                                                                                                                                            25 января 2016, 13:30
                                                                                                                                                                            Все равно фон пунктов остается
                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                              25 января 2016, 13:53
                                                                                                                                                                              Если необходимо и для выпадающего, то сделайте так:
                                                                                                                                                                              .navbar-nav a:hover,
                                                                                                                                                                              .navbar-nav a:focus {
                                                                                                                                                                                color: green;
                                                                                                                                                                                background-color: transparent !important;
                                                                                                                                                                              }
                                                                                                                                                                              </style>
                                                                                                                                                                              
                                                                                                                                                                              Для гарантии можете добавить !important.
                                                                                                                                                                              1. Федор
                                                                                                                                                                                25 января 2016, 22:05
                                                                                                                                                                                Спасибо за помощь, Александр! Частично помогло. Только вот в выпадающем списке по прежнему почему-то фон для пунктов (Пункт1, Пункт2, Пункт3) остается, либо я что-то не так делаю(((
                                                                                                                                                                                Причем как интересно получается: в горизонтальном расположении меню, у пунктов выпадающего списка фон ЕСТЬ. А в вертикальном расположении меню (если сузить окно браузера), у пунктов выпадающего списка фона НЕТ. Странно
                                                                                                                                                                        2. Дмитрий
                                                                                                                                                                          24 января 2016, 15:14
                                                                                                                                                                          Подскажите, пожалуйста, как справиться с такой проблемой (Bootstrap 4):
                                                                                                                                                                          В Google Chrome все нормально работает.
                                                                                                                                                                          В IE 11 выдает следующую ошибку:
                                                                                                                                                                          Необработанное исключение в строке 7, столбце 2411 в _localhost:49343/js4/bootstrap.min.js
                                                                                                                                                                          0x800a139e — Ошибка выполнения JavaScript: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/).
                                                                                                                                                                          Остальные браузеры не проверял.
                                                                                                                                                                          PS:
                                                                                                                                                                          Установлен bootstrap-4.0.0-alpha.2-dist, система Windows-10.
                                                                                                                                                                          На мой взгляд, дизайн в Bootstrap 4 действительно стал адаптивным.
                                                                                                                                                                          1. Александр Мальцев
                                                                                                                                                                            24 января 2016, 15:49
                                                                                                                                                                            Подключить библиотеку tether.min.js перед подключением bootstrap.min.js. Скачать можете по ссылке, которую привели.
                                                                                                                                                                            Данная строчка в файле bootstrap.min.js проверяет, подключен ли Tether, и если не подключен, то выбрасывает исключение.
                                                                                                                                                                            <script src="/путь/до/tether.min.js"></script>
                                                                                                                                                                            
                                                                                                                                                                          2. Иван
                                                                                                                                                                            11 января 2016, 11:34
                                                                                                                                                                            Подскажите как выравнивать ссылки в навигационном меню по всей ширине, а то сейчас они прилипают к левому краю, хотелось бы что бы выравнивались по всему контейнеру как например группы кнопок, красивее получается
                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                              11 января 2016, 16:05
                                                                                                                                                                              А почему бы тогда его не использовать. В качестве меню можно использовать не только navbar, но, например, как Вы предлагаете Группы кнопок. Тем более что такие меню применяются на сайтах.
                                                                                                                                                                              В navbar, например, с помощью Flex это можно сделать так:
                                                                                                                                                                              Код CSS и HTML
                                                                                                                                                                              /*Стили CSS:*/
                                                                                                                                                                              @media (min-width: 768px) { 
                                                                                                                                                                                ul.navbar-nav {
                                                                                                                                                                                  width: 100%;
                                                                                                                                                                                  display: flex;
                                                                                                                                                                                  -webkit-justify-content: space-around; /* Safari */
                                                                                                                                                                                  justify-content: space-around;
                                                                                                                                                                                }
                                                                                                                                                                              }
                                                                                                                                                                              
                                                                                                                                                                              <!--HTML разметка:-->
                                                                                                                                                                              <nav class="navbar navbar-default">
                                                                                                                                                                                <div class="container-fluid">
                                                                                                                                                                                  <div class="navbar-header">
                                                                                                                                                                                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainmenu">
                                                                                                                                                                                      <span class="sr-only">Toggle navigation</span>
                                                                                                                                                                                      <span class="icon-bar"></span>
                                                                                                                                                                                      <span class="icon-bar"></span>
                                                                                                                                                                                      <span class="icon-bar"></span>
                                                                                                                                                                                    </button>
                                                                                                                                                                                  </div>
                                                                                                                                                                                  <div class="collapse navbar-collapse" id="mainmenu">
                                                                                                                                                                                    <ul class="nav navbar-nav">
                                                                                                                                                                                      <li class="active"><a href="#">Ссылка 1</a></li>
                                                                                                                                                                                      <li><a href="#">Ссылка 2</a></li>
                                                                                                                                                                                      <li><a href="#">Ссылка 3</a></li>
                                                                                                                                                                                      <li><a href="#">Ссылка 4</a></li>
                                                                                                                                                                                      <li><a href="#">Ссылка 5</a></li>
                                                                                                                                                                                    </ul>
                                                                                                                                                                                  </div>
                                                                                                                                                                                </div>
                                                                                                                                                                              </nav>
                                                                                                                                                                              
                                                                                                                                                                              1. Иван
                                                                                                                                                                                11 января 2016, 16:45
                                                                                                                                                                                Александр посмотрел ваш пример, спасибо за помощь!
                                                                                                                                                                                1. Иван
                                                                                                                                                                                  11 января 2016, 16:28
                                                                                                                                                                                  навбар нужен для того чтобы при входе с мобильных устройств меню отображалось с помощью иконки, которая при нажатии раздвигается и выводит список, к сожалению я не нашел способа как это сделать при помощи группы кнопок
                                                                                                                                                                              2. Виктор
                                                                                                                                                                                31 декабря 2015, 17:10
                                                                                                                                                                                Большое спасибо за помощь, я попробую так сделать. Это реально первый сайт который я встретил где реально помогают!!! С НОВЫМ ГОДОМ!!! ЖЕЛАЮ ВСЕХ БЛАГ!!!
                                                                                                                                                                                1. Александр Мальцев
                                                                                                                                                                                  01 января 2016, 15:50
                                                                                                                                                                                  Спасибо. Вас тоже с наступившим 2016 годом!
                                                                                                                                                                                  Стараюсь, по возможности отвечать на все комментарии :)
                                                                                                                                                                                2. Виктор
                                                                                                                                                                                  30 декабря 2015, 19:20
                                                                                                                                                                                  приветствую, а как сделать что бы то что вне меню (контент) не заезжал под меню, то есть меню с верху, и когда заходишь на сайт верхнее меню как бы поверх контента сверху размещается, а нужно что бы было меню а потом контент, но при прокрутке страницы меню оставалось сверху, вот ещё как сделать что бы меню было активным, у меня пункт с подпунктоми не разварачиваются
                                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                                    31 декабря 2015, 11:08
                                                                                                                                                                                    Здравствуйте.
                                                                                                                                                                                    Фиксированное меню Bootstrap располагается поверх контента с помощью CSS свойства z-index (если значение его больше чем у другого элемента, то он располагается над ним):
                                                                                                                                                                                    .navbar-fixed-top, .navbar-fixed-bottom {
                                                                                                                                                                                      position: fixed;
                                                                                                                                                                                      right: 0;
                                                                                                                                                                                      left: 0;
                                                                                                                                                                                      z-index: 1030;
                                                                                                                                                                                    }
                                                                                                                                                                                    
                                                                                                                                                                                    Сместить контент от верхнего края страницы (body) можно указав в CSS следующее правило:
                                                                                                                                                                                    body { padding-top: 70px; }
                                                                                                                                                                                    
                                                                                                                                                                                    Если что-то не работает, то проверьте, подключили ли Вы файлы Bootstrap (bootstrap.css, bootstrap.js) и библиотеку jQuery. Кроме этого проверьте, если ли у Вас ошибки в консоли браузера (клавиша F12).
                                                                                                                                                                                    1. Виктор
                                                                                                                                                                                      31 декабря 2015, 19:51
                                                                                                                                                                                      css подключен js нет, а как его подключить?
                                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                                        01 января 2016, 15:46
                                                                                                                                                                                        Это описано на уроке Bootstrap 3 — Начало работы в разделе Шаг 2. Подключение платформы Bootstrap 3 к веб-странице.
                                                                                                                                                                                  2. Arthur
                                                                                                                                                                                    29 декабря 2015, 17:43
                                                                                                                                                                                    Как это меню сдвинуть влево чтоб добавить еще элементы. А в опере вообще после главной остальные пункты ушли вниз.
                                                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                                                      30 декабря 2015, 10:39
                                                                                                                                                                                      Меню Bootstrap navbar занимает всю ширину контейнера в которое оно помещено.
                                                                                                                                                                                      Куда его можно сдвинуть, если оно занимает всю ширину контейнера?
                                                                                                                                                                                      Если его необходимо поместить в некоторый блок, то сделайте разметку и поместите его в этот блок.

                                                                                                                                                                                      Бутстрап поддерживает следующие браузеры:
                                                                                                                                                                                      Браузеры, которые официально поддерживает Bootstrap
                                                                                                                                                                                      * Internet Explorer 8-11
                                                                                                                                                                                    2. Vo
                                                                                                                                                                                      16 декабря 2015, 20:34
                                                                                                                                                                                      И снова здравствуйте! На этот раз ситуация такая: когда экран достигает такой ширины, что меню «сворачивается» в кнопку, при нажатии на эту кнопку появляется выпадающее меню. И вот это выпадающее меню сдвигает весь контент, который под ним, а хочется, чтобы оно отображалось «поверх» контента. Можно ли это сделать и если да, то как? И ещё хочется, чтобы при нажатии на любой из пунктов меню оно самостоятельно закрывалось опять «в кнопочку». Спасибо!
                                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                                        17 декабря 2015, 07:42
                                                                                                                                                                                        Здравствуйте.
                                                                                                                                                                                        Если Вам так это необходимо, то тут придётся для начала выполнить следующее действие:
                                                                                                                                                                                        .navbar {
                                                                                                                                                                                          position: relative;
                                                                                                                                                                                        }
                                                                                                                                                                                        .collapse.in {
                                                                                                                                                                                          position: absolute !important;
                                                                                                                                                                                        }
                                                                                                                                                                                        
                                                                                                                                                                                        А потом перейти к визуальному оформлению этих блоков и поработать с анимацией.
                                                                                                                                                                                        Скорее всего, потребуется использование события:
                                                                                                                                                                                        $('.navbar').on('show.bs.collapse', function () {
                                                                                                                                                                                          // …
                                                                                                                                                                                        })
                                                                                                                                                                                        
                                                                                                                                                                                        Для решения второго вопроса попробуйте использовать следующее решение:
                                                                                                                                                                                        //при нажатии на ссылку
                                                                                                                                                                                        $(".navbar-collapse a").click(function() {
                                                                                                                                                                                          //если она не имеет класс dropdown-toggle
                                                                                                                                                                                          if (!$(this).hasClass("dropdown-toggle")) {
                                                                                                                                                                                            //то закрыть меню
                                                                                                                                                                                            $(".navbar-collapse").collapse('hide');
                                                                                                                                                                                          }
                                                                                                                                                                                        });
                                                                                                                                                                                        
                                                                                                                                                                                        1. Vo
                                                                                                                                                                                          17 декабря 2015, 10:10
                                                                                                                                                                                          Спасибо, попробую.
                                                                                                                                                                                      2. Gleb
                                                                                                                                                                                        14 декабря 2015, 14:35
                                                                                                                                                                                        Здравствуйте, у меня следующий вопрос.
                                                                                                                                                                                        Навигационное меню в bootstrap 3 class=«nav» при прокрутке страницы разделы меню подсвечиваются, указаны , пробую отменить подсветку разделов не могу найти как отключил скрипт скролла, не помогает.
                                                                                                                                                                                        Цель что бы при наведении мышкой раздел в меню подсвечивался, но при прокрутке страницы разделы не подсвечивались. Спасибо.
                                                                                                                                                                                        Вижу раздел «Пример совместного использования плагинов Affix и ScrollSpy» но описание отсутствует.
                                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                                          15 декабря 2015, 06:51
                                                                                                                                                                                          Здравствуйте, странное желание.
                                                                                                                                                                                          Можно так:
                                                                                                                                                                                          .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
                                                                                                                                                                                            color: #777;
                                                                                                                                                                                            background-color: transparent;
                                                                                                                                                                                          }
                                                                                                                                                                                          /* Изменяем цвет и фон активного пункта только при наведении */
                                                                                                                                                                                          .nav .active a:hover {
                                                                                                                                                                                             color: yellow;
                                                                                                                                                                                             background-color: green !important;
                                                                                                                                                                                          }
                                                                                                                                                                                          
                                                                                                                                                                                        2. Тимофей
                                                                                                                                                                                          28 ноября 2015, 17:23
                                                                                                                                                                                          Спасибо! Ты лучший! Немного переделал под свои нужды, т.к. твое меню с PDO не схлопывалось на мобильных. HTML-кода было вполне достаточно )).
                                                                                                                                                                                          Было бы круто, если бы у тебя получилось выделить время и написать урок в соответствующем разделе о том, как пользоваться редкими плейсхолдерами типа [[+classnames]] и [[+attributes]], а то достаточно сложно найти по ним информацию.
                                                                                                                                                                                          Постараюсь задонатить при первой возможности на твой сайт — подобные проекты должны развиваться.
                                                                                                                                                                                          1. Тимофей
                                                                                                                                                                                            26 ноября 2015, 16:39
                                                                                                                                                                                            Шеф, привет! Подскажи, пожалуйста, возможно ли сделать меню с расщепленными кнопками? Т.е. основная категория — в основном поле, а вложенные в нее подкатегории — в прикрепленной выпадайке.
                                                                                                                                                                                            Нужно по вот такому принципу: Скриншот.
                                                                                                                                                                                            И потом разложить все это с помощью pdoMenu. Буду благодарен за пример HTML — кода.
                                                                                                                                                                                            PS. Классный upload-ер!
                                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                                              28 ноября 2015, 13:59
                                                                                                                                                                                              PDOMenu (MODX Revolution):
                                                                                                                                                                                              <div class="collapse navbar-collapse">
                                                                                                                                                                                                <ul class="nav navbar-nav">
                                                                                                                                                                                                  [[pdoMenu?
                                                                                                                                                                                                    &startId=`0`
                                                                                                                                                                                                    &level=`2`
                                                                                                                                                                                                    &tplParentRow=`@INLINE
                                                                                                                                                                                                      <li class="[[+classnames]]">
                                                                                                                                                                                              	  <div class="btn-group navbar-btn">
                                                                                                                                                                                                          <a href="[[+uri]]" class="btn btn-danger" [[+attributes]]>[[+menutitle]]</a>
                                                                                                                                                                                                          <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                                                                                                                                                                                                            <span class="caret"></span>
                                                                                                                                                                                                            <span class="sr-only">Toggle Dropdown</span>
                                                                                                                                                                                                          </button>
                                                                                                                                                                                              	    <ul class="dropdown-menu">[[+wrapper]]</ul>
                                                                                                                                                                                              	  </div>
                                                                                                                                                                                              	</li>`
                                                                                                                                                                                                    &tplOuter=`@INLINE [[+wrapper]]`
                                                                                                                                                                                                    &rowClass=`menuid[[+id]]`
                                                                                                                                                                                                  ]]
                                                                                                                                                                                                </ul>
                                                                                                                                                                                              </div>
                                                                                                                                                                                              
                                                                                                                                                                                              1. Александр Мальцев
                                                                                                                                                                                                28 ноября 2015, 13:55
                                                                                                                                                                                                Привет, Тимофей!
                                                                                                                                                                                                HTML-код меню:
                                                                                                                                                                                                <nav class="navbar navbar-default">
                                                                                                                                                                                                  <div class="container-fluid">
                                                                                                                                                                                                    <div class="navbar-header">
                                                                                                                                                                                                      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                                                                                                                                                                                        <span class="sr-only">Toggle navigation</span>
                                                                                                                                                                                                        <span class="icon-bar"></span>
                                                                                                                                                                                                        <span class="icon-bar"></span>
                                                                                                                                                                                                        <span class="icon-bar"></span>
                                                                                                                                                                                                      </button>
                                                                                                                                                                                                      <a class="navbar-brand" href="#">Brand</a>
                                                                                                                                                                                                    </div>
                                                                                                                                                                                                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                                                                                                                                                                                      <ul class="nav navbar-nav">
                                                                                                                                                                                                        <!-- Кнопка 1 с разделителем -->
                                                                                                                                                                                                        <li>
                                                                                                                                                                                                          <div class="btn-group navbar-btn">
                                                                                                                                                                                                            <button type="button" class="btn btn-danger">Action</button>
                                                                                                                                                                                                            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                                                                                                                                                                                                              <span class="caret"></span>
                                                                                                                                                                                                              <span class="sr-only">Toggle Dropdown</span>
                                                                                                                                                                                                            </button>
                                                                                                                                                                                                            <ul class="dropdown-menu" role="menu">
                                                                                                                                                                                                              <li><a href="#">Action</a></li>
                                                                                                                                                                                                              <li><a href="#">Another action</a></li>
                                                                                                                                                                                                              <li><a href="#">Something else here</a></li>
                                                                                                                                                                                                            </ul>
                                                                                                                                                                                                          </div>
                                                                                                                                                                                                        </li>
                                                                                                                                                                                                        <!-- Конец кода кнопки 1 с разделителем -->
                                                                                                                                                                                                        
                                                                                                                                                                                                        <!-- Кнопка 2 с разделителем -->
                                                                                                                                                                                                        <!-- Кнопка 3 с разделителем -->
                                                                                                                                                                                                        <!-- ... -->
                                                                                                                                                                                                      </ul>
                                                                                                                                                                                                    </div>
                                                                                                                                                                                                  </div>
                                                                                                                                                                                                </nav>
                                                                                                                                                                                                
                                                                                                                                                                                              2. Vo
                                                                                                                                                                                                11 ноября 2015, 12:05
                                                                                                                                                                                                Здравствуйте! Подскажите, пожалуйста, как в меню добавить разделители, чтобы получить что-то типа такого:
                                                                                                                                                                                                Main | Services | About us | Contacts
                                                                                                                                                                                                Спасибо.
                                                                                                                                                                                                1. Александр Мальцев
                                                                                                                                                                                                  11 ноября 2015, 14:44
                                                                                                                                                                                                  Здравствуйте.
                                                                                                                                                                                                  Это можно сделать с помощью стилей CSS.
                                                                                                                                                                                                  Например так:
                                                                                                                                                                                                  .navbar ul.nav>li {
                                                                                                                                                                                                    border-right: 1px solid black;
                                                                                                                                                                                                  }
                                                                                                                                                                                                  .navbar ul.nav>li:last-of-type {
                                                                                                                                                                                                    border-right: none;
                                                                                                                                                                                                  }
                                                                                                                                                                                                  
                                                                                                                                                                                                  1. Vo
                                                                                                                                                                                                    11 ноября 2015, 15:42
                                                                                                                                                                                                    Спасибо. Попробую.
                                                                                                                                                                                                2. noname
                                                                                                                                                                                                  30 октября 2015, 17:14
                                                                                                                                                                                                  Подскажите, пожалуйста, как привязать Easing эффекты на dropdown-menu?
                                                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                                                    01 ноября 2015, 03:19
                                                                                                                                                                                                    1. Скачать плагин jquery.easing.1.3.js или какой-то другой.
                                                                                                                                                                                                    2. Подключить его к странице
                                                                                                                                                                                                    3. Добавить на страницу скрипт, изменяющий анимацию компонента dropdown при его открытии и (или) закрытии:
                                                                                                                                                                                                    <script>
                                                                                                                                                                                                    // после загрузки страницы //
                                                                                                                                                                                                    $(function(){
                                                                                                                                                                                                      // добавить анимацию к dropdown при открытии //
                                                                                                                                                                                                      $('.dropdown').on('show.bs.dropdown', function(){
                                                                                                                                                                                                        $(this).find('.dropdown-menu').first().stop(true, true).animate({height: "show"}, 2000, "easeInOutCubic");
                                                                                                                                                                                                      });
                                                                                                                                                                                                      // добавить анимацию к dropdown при закрытии //
                                                                                                                                                                                                      $('.dropdown').on('hide.bs.dropdown', function(){
                                                                                                                                                                                                        $(this).find('.dropdown-menu').first().stop(true, true).animate({height: "hide"}, 2000, "easeInOutCubic");
                                                                                                                                                                                                      });
                                                                                                                                                                                                    }); 
                                                                                                                                                                                                    </script>
                                                                                                                                                                                                    
                                                                                                                                                                                                    4.Настроить временные интервалы (в примере 2000 мс) и методы easing (в примере easeInOutCubic)
                                                                                                                                                                                                    1. noname
                                                                                                                                                                                                      01 ноября 2015, 13:02
                                                                                                                                                                                                      Александр, огромное спасибо. У вас очень хороший и полезный ресурс.
                                                                                                                                                                                                  2. antant
                                                                                                                                                                                                    15 сентября 2015, 01:59
                                                                                                                                                                                                    Очень нужно сделать высоту навбара в 25px, полдня убил, ничего не смог найти, тупо пересобрал BS под себя в высотой навбара 25, но это э не то :(, подскажите плиз стиль где задается эта высота
                                                                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                                                                      15 сентября 2015, 13:15
                                                                                                                                                                                                      Привет, если тебе надо с помощью CSS, то попробуй вот так:
                                                                                                                                                                                                      .navbar-nav > li > a, .navbar-brand {
                                                                                                                                                                                                        padding-top:2.5px !important; 
                                                                                                                                                                                                        padding-bottom:2.5px !important;
                                                                                                                                                                                                        height: 25px;
                                                                                                                                                                                                      }
                                                                                                                                                                                                      .navbar {
                                                                                                                                                                                                        min-height:25px !important;
                                                                                                                                                                                                      }
                                                                                                                                                                                                      .navbar-toggle {
                                                                                                                                                                                                        padding-top:2.5px !important; 
                                                                                                                                                                                                        padding-bottom:2.5px !important;
                                                                                                                                                                                                        margin-top: 2px !important;
                                                                                                                                                                                                        margin-bottom: 2px !important;
                                                                                                                                                                                                      }
                                                                                                                                                                                                      
                                                                                                                                                                                                    2. Сергей
                                                                                                                                                                                                      15 августа 2015, 12:32
                                                                                                                                                                                                      В Bootstrap меню схлопывается при экране 768px, а как увеличить этот параметр средствами CSS до 1200, может, подскажите?
                                                                                                                                                                                                      Решение через @grid-float-breakpoint не подходит, так как при этом вся сетка тоже сворачивается.
                                                                                                                                                                                                      У меня в меню довольно много пунктов, не могу победить эту проблему (
                                                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                                                        16 августа 2015, 03:44
                                                                                                                                                                                                        Привет, Сергей.
                                                                                                                                                                                                        Используйте следующий код CSS:
                                                                                                                                                                                                        @media (max-width: 1200px) {
                                                                                                                                                                                                          .navbar-header {
                                                                                                                                                                                                            float: none;
                                                                                                                                                                                                          }
                                                                                                                                                                                                          .navbar-left,.navbar-right {
                                                                                                                                                                                                            float: none !important;
                                                                                                                                                                                                          }
                                                                                                                                                                                                          .navbar-toggle {
                                                                                                                                                                                                            display: block;
                                                                                                                                                                                                          }
                                                                                                                                                                                                          .navbar-collapse {
                                                                                                                                                                                                            border-top: 1px solid transparent;
                                                                                                                                                                                                            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
                                                                                                                                                                                                          }
                                                                                                                                                                                                          .navbar-fixed-top {
                                                                                                                                                                                                            top: 0;
                                                                                                                                                                                                            border-width: 0 0 1px;
                                                                                                                                                                                                          }
                                                                                                                                                                                                          .navbar-collapse.collapse {
                                                                                                                                                                                                            display: none!important;
                                                                                                                                                                                                          }
                                                                                                                                                                                                          .navbar-nav {
                                                                                                                                                                                                            float: none!important;
                                                                                                                                                                                                            margin-top: 7.5px;
                                                                                                                                                                                                          }
                                                                                                                                                                                                          .navbar-nav>li {
                                                                                                                                                                                                            float: none;
                                                                                                                                                                                                          }
                                                                                                                                                                                                          .navbar-nav>li>a {
                                                                                                                                                                                                            padding-top: 10px;
                                                                                                                                                                                                            padding-bottom: 10px;
                                                                                                                                                                                                          }
                                                                                                                                                                                                          .collapse.in{
                                                                                                                                                                                                            display:block !important;
                                                                                                                                                                                                          }
                                                                                                                                                                                                        }
                                                                                                                                                                                                        
                                                                                                                                                                                                        1. Сергей
                                                                                                                                                                                                          17 августа 2015, 21:34
                                                                                                                                                                                                          Спасибо.
                                                                                                                                                                                                          Есть еще один вопрос, если можно. Использую фиксированное меню, и когда ссылка ведет на id (анкор) то меню перекрывает контекст. Для статики это решается добавлением к body свойства padding-top: 40px. А вот как быть с ссылками-анкорами не понятно.
                                                                                                                                                                                                          1. Александр Мальцев
                                                                                                                                                                                                            20 августа 2015, 10:05
                                                                                                                                                                                                            Попробуйте использовать следующий стиль:
                                                                                                                                                                                                            *[id]:before { 
                                                                                                                                                                                                              display: block; 
                                                                                                                                                                                                              content: " "; 
                                                                                                                                                                                                              margin-top: -75px; 
                                                                                                                                                                                                              height: 75px; 
                                                                                                                                                                                                              visibility: hidden; 
                                                                                                                                                                                                            }
                                                                                                                                                                                                            
                                                                                                                                                                                                            А почему Вы используете высоту 40px? По умолчанию высота Navbar 50px, да ещё необходимо обеспечить хоть небольшой отступ (не меньше 20px). В итоге получается, что отступ необходимо задавать как минимум пикселей 70.
                                                                                                                                                                                                            1. Сергей
                                                                                                                                                                                                              21 августа 2015, 10:50
                                                                                                                                                                                                              Ещё раз спасибо, Александр, за ответы на вопросы.
                                                                                                                                                                                                              Помогло, правда, я использовал div[id]:before — т.к. на теге ссылок висят свои ID, позволяющие переходить дальше с клавиатуры, а делать их блочными нельзя.
                                                                                                                                                                                                              Относительно высоты отступа, ввиду того, что я не профессионал, а любитель, то у меня порой стоят переводы строк. Возможно, нужно будет подумать и сделать код более чистым.
                                                                                                                                                                                                              И не сочтите совсем уж за наглость, а можно как-то после перехода по ссылке, div[id] подсветить её средствами CSS?
                                                                                                                                                                                                              1. Александр Мальцев
                                                                                                                                                                                                                21 августа 2015, 13:26
                                                                                                                                                                                                                :target {
                                                                                                                                                                                                                  background: yellow;
                                                                                                                                                                                                                }
                                                                                                                                                                                                                
                                                                                                                                                                                                                1. Сергей
                                                                                                                                                                                                                  21 августа 2015, 14:04
                                                                                                                                                                                                                  Спасибо, то, что нужно!
                                                                                                                                                                                                                  Пришлось только поменять цвет на выделение bold, т.к. блок у нас же стал выше после :before. Но выделение цветом и не важно, главное понятно, на каком тексте фокус.
                                                                                                                                                                                                      2. Анатоилй
                                                                                                                                                                                                        29 июня 2015, 19:34
                                                                                                                                                                                                        А как решить вопрос, чтобы меню прилипало к верху (после прокрутки). Уже 3-й день бьюсь с этой проблемой. Кучу скриптов перебрал, ни один не работает. Может, подскажете решение.
                                                                                                                                                                                                        Видел вроде в самом бутстрапе есть плагины affix. Но так и не разобрался, как его прикрутить к меню, чтобы оно прилипало.
                                                                                                                                                                                                        Буду благодарен, если подскажите, как решить проблему.
                                                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                                                          30 июня 2015, 16:10
                                                                                                                                                                                                          Не знаю что у вас конкретно не получается с вашим меню, но с affix необходимо работать следующим образом:
                                                                                                                                                                                                          1. Добавить к необходимому элементу (например: меню navbar) атрибуты data-spy=«affix» (подключаем affix) и data-offset-top=«200» (задаём смещение, при котором элемент переходит в состояние position:fixed и обратно).
                                                                                                                                                                                                          2. Задать необходимые стили с помощью CSS, кроме position:fixed; для класса .affix
                                                                                                                                                                                                          3. Для классов .affix, .affix-top и .affix-bottom (в вашем случае для .affix-top и .affix) самостоятельно (независимо от этого плагина) задать вручную актуальные позиции.

                                                                                                                                                                                                          Т.е. для вашего меню кроме указания атрибутов, Вам как минимум надо написать ещё CSS для определения положения и ширины вашего блока (меню).

                                                                                                                                                                                                          Например, описать положения элемента (меню), когда к нему добавляется класс .affix (т.е. он становится фиксировано спозиционирован):
                                                                                                                                                                                                          .affix {
                                                                                                                                                                                                            left: 0;
                                                                                                                                                                                                            width:100%;
                                                                                                                                                                                                          }
                                                                                                                                                                                                          
                                                                                                                                                                                                        2. Дамир
                                                                                                                                                                                                          05 июня 2015, 14:53
                                                                                                                                                                                                          «Примечание: Располагайте содержимое навигационного меню внутри контейнера»
                                                                                                                                                                                                          Контейнер имеет отступы по бокам. Я добавил к меню класс row.
                                                                                                                                                                                                          class="navbar navbar-default <b>row</b>"
                                                                                                                                                                                                          PS. Каждый блок (шапка, контент, подвал) у меня в отдельном row.
                                                                                                                                                                                                          1. Юрий
                                                                                                                                                                                                            30 октября 2014, 15:09
                                                                                                                                                                                                            Уважаемый автор! Этот сайт сделан на чистом Bootstrap или еще какая-то тема прикручена?
                                                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                                                              30 октября 2014, 16:45
                                                                                                                                                                                                              Frontend сайта выполнен на Bootstrap 3.
                                                                                                                                                                                                            Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.