Bootstrap 3 - Меню (navbar)

В этом уроке вы узнаете, как создать навигационное меню для вашего сайта с помощью Twitter Bootstrap.

Создание навигационного меню с помощью Twitter Bootstrap

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

Для начала создадим навигационное меню с простыми пунктами, а затем добавим пункты с подпунктами и текстовым полем для поиска информации на сайте.

<nav role="navigation" class="navbar navbar-default">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a href="#" class="navbar-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="#">Главная</a></li>
      <li><a href="#">Статьи</a></li>
      <li><a href="#">Новости</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Войти</a></li>
    </ul>
  </div>
</nav>

Выше приведенный пример будет выглядеть примерно так:

Навигационное меню

Формы в навигационном меню

Для отображения элементов формы в навигационном меню, их необходимо поместить внутри тега <form> с классом .navbar-form для правильного выравнивания их по вертикали и сжатия на небольших экранах.

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

При размещении кнопок вне формы, необходимо добавить к элементу <button> класс .navbar-btn, чтобы отцентрировать их по вертикали навигационном меню.

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

При использовании гиперссылок без применения соответствующих компонентов Bootstrap, Вы должны использовать класс .navbar-link.

Для выравнивания компонентов (гиперссылки, формы, кнопки или текст) применяйте служебные классы .navbar-left или .navbar-right. Например, чтобы выравнять гиперссылки, поместите их в отдельный элемент <ul>, а затем примените соответствующий служебный класс.

Навигационное меню с выпадающим подменю и поисковой формой.

<nav role="navigation" class="navbar navbar-default">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a href="#" class="navbar-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="#">Главная</a></li>
      <li><a href="#">Статьи</a></li>
      <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Новости <b class="caret"></b></a>
        <ul role="menu" class="dropdown-menu">
          <li><a href="#">Windows</a></li>
          <li><a href="#">Mac OS</a></li>
          <li><a href="#">Linux</a></li>
          <li class="divider"></li>
          <li><a href="#">Другие системы</a></li>
        </ul>
      </li>
    </ul>
    <form role="search" class="navbar-form navbar-left">
      <div class="form-group">
        <input type="text" placeholder="Найти" class="form-control">
      </div>
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Войти</a></li>
    </ul>
  </div>
</nav>

Выше приведенный пример будет выглядеть примерно так:

Навигационное меню с поиском

Фиксированные навигационные меню (Fixed Navbar)

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


Навигационное меню, прикрепленное к верхней части страницы

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

<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">Бренд</a>
    </div>
    <!-- Collection of nav links and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Главная</a></li>
        <li><a href="#">Статьи</a></li>
        <li><a href="#">Новости</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Войти</a></li>
      </ul>
    </div>
  </div>
</nav>

Выше приведенный пример будет выглядеть примерно так:

Навигационное меню

Примечание: Располагайте содержимое навигационного меню внутри контейнера (.container или .container-fluid) чтобы обеспечить соответствие отступов меню отступам основного содержания страницы.


Навигационное меню, прикрепленное к нижней части страницы

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

<nav role="navigation" class="navbar navbar-default navbar-fixed-bottom">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">Бренд</a>
    </div>
    <!-- Collection of nav links and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Главная</a></li>
        <li><a href="#">Статьи</a></li>
        <li><a href="#">Новости</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Войти</a></li>
      </ul>
    </div>
  </div>
</nav>

Выше приведенный пример будет выглядеть примерно так:

Навигационное меню, прикрепленное к нижней части страницы

Примечание: Располагайте содержимое навигационного меню внутри контейнера (.container или .container-fluid) чтобы обеспечить соответствие отступов меню отступам основного содержания страницы.

Примечание: Фиксированное меню располагается поверх остального контента страницы. Если вы не добавите отступы для основного содержания страницы от ее верхней или нижней границы, то может случиться наложение. Так как фиксированная высота навигационного меню составляет 50px, то необходимо задать отступ более 50px (Например: body {padding-top: 70px;}), с помощью стиля CSS, файл которого необходимо подключить после основного CSS файла Bootstrap. В противном случае, значение заданного отступа работать не будет.

Создание статичного навигационного меню (Static Top Navbar) с помощью Twitter Bootstrap

В отличие от навигационных меню, прикрепленных строго к нижней или верхней части страницы, данное навигационное меню может быть расположено в любом месте страницы и имеет ширину элемента контейнера. Причем, для статичного навигационного меню, в отличие фиксированного, задавать дополнительные отступы не требуется. Чтобы создать статичное навигационное меню необходимо добавить дополнительный класс .navbar-static-top к основным классам навигационного меню .navbar и .navbar-default.

<nav role="navigation" class="navbar navbar-default navbar-static-top">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a href="#" class="navbar-brand">Бренд</a>
  </div>
  <!-- Collection of nav links and other content for toggling -->
  <div id="navbarCollapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Главная</a></li>
      <li><a href="#">Статьи</a></li>
      <li><a href="#">Новости</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Войти</a></li>
    </ul>
  </div>
</nav>

Выше приведенный пример будет выглядеть примерно так:

Навигационное меню

Инвертированное навигационное меню (Inverted Navbar) Twitter Bootstrap

Чтобы создать инвертированное навигационное меню Bootstrap, необходимо добавить дополнительный класс .navbar-inverse к классу .navbar.

<nav class="navbar navbar-inverse" role="navigation">
  ...
</nav>

Выше приведенный пример будет выглядеть примерно так:

Инвертированное навигационное меню


   Bootstrap 0    90383 +1

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

  1. Юрий # +1
    Уважаемый автор! этот сайт сделан на чистом bootstrap или еще какая то тема прикручена?
    1. Козлодоевский # 0
      разве не видно, что чистый bootstrap 3. Если бы имели практический опыт работы с этой поделкой, таких вопросов бы не возникало. Народ зачастую слишком ленив, чтобы что-то там менять. Жрет по дефолту и не давится.
      1. Александр Мальцев # +1
        Front-end сайта выполнен на Twitter Bootstrap 3 с использованием стандартной темы. Мне очень нравятся сайты, которые выполнены светлых тонах, т.к. в них основной акцент – это содержимое. Такие сайты удобно читать, т.к. ничто не отвлекает внимание. А что на сайте самое главное?
        1. MR # 0
          Самое главное чтобы код в статьях был повторяем ну и понятен. Здесь все нормально:)
      2. Дамир # 0
        «Примечание: Располагайте содержимое навигационного меню внутри контейнера»
        контейнер от отступов по бокам, у меня не помогает, я решил эту задачу, разместив меню класс row
        class="navbar navbar-default <b>row</b>"
        ps: каждый блок шапка, контент, подвал, у меня в отдельном row
        1. Анатоилй # 0
          А как решить вопрос чтобы меню прилипало к верху. Т.е. при прокрутке меню потом прилипло к верху. Уже 3-й день бьюсь с этой проблемой. Кучу скриптов перебрал ни один не работает.
          Может подскажете решение.
          Видел вроде в самом бутсрапе есть плагины affix, но так и не разобрался как прикрутить его к меню, чтобы оно прилипало.
          Буду благодарен если подскажите как решить проблему
          1. Александр Мальцев # 0
            Не знаю что у вас конкретно не получается с вашим меню, но с 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. Сергей # 0
            В Bootstrap меню схлопывается при экране 768px, а как увеличить этот параметр средствами CSS до 1200, может подскажите?

            Решение через @grid-float-breakpoint не подходит, так как при этом вся сетка тоже сворачивается.

            У меня в меню довольно много пунктов, не могу победить эту проблему (
            1. Александр Мальцев # 0
              Привет, Сергей.
              Используйте следующий код 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. Сергей # 0
                Спасибо.
                Есть еще один вопрос, если можно. Использую фиксированное меню, и когда ссылка ведет на id (анкор) то меню перекрывает контекст. для статики решается body padding-top: 40px; а вот для ссылок-анкоров как быть не понятно.
                1. Александр Мальцев # 0
                  Попробуйте использовать следующий стиль:
                  *[id]:before { 
                    display: block; 
                    content: " "; 
                    margin-top: -75px; 
                    height: 75px; 
                    visibility: hidden; 
                  }
                  
                  А почему Вы используете высоту 40px? По умолчанию высота Navbar 50px, да ещё необходимо обеспечить хоть небольшой отступ (не меньше 20px). В итоге получается, что отступ необходимо задавать как минимум пикселей 70.
                  1. Сергей # 0
                    Ещё раз спасибо, Александр, за ответы на вопросы.
                    Помогло, правда я использовал div[id]:before — т.к. на теге ссылок висят свои ID, позволяющие переходить дальше с клавиатуры, а делать их блочными нельзя.

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

                    И не сочтите совсем уж за наглость, а можно как-то после перехода по ссылке, div[id] подсветить средствами CSS?
                    1. Александр Мальцев # 0
                      :target {
                        background: yellow;
                      }
                      
                      1. Сергей # 0
                        Спасибо, то что нужно!
                        пришлось только поменять цвет на выделение bold, т.к. блок у нас же стал выше после :before. Но выделение цветом и не важно, главное понятно на каком тексте фокус.
            2. antant # 0
              Очень нужно сделать высоту навбара в 25px, полдня убил, ничего не смог найти, тупо пересобрал BS под себя в высотой навбара 25, но это э не то :(, подскажите плиз стиль где задается эта высота
              1. Александр Мальцев # 0
                Привет, если тебе надо с помощью 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. Влад # 0
                Что-то у меня в мобильной версии когда кликаю на Новости, не раскрывается подменю, а меню сворачивается. Когда в версии для компа, то все работает нормально.
                1. noname # 0
                  Подскажите, пожалуйста, как привязать Easing эффекты на dropdown-menu?
                  1. Александр Мальцев # 0
                    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 # 0
                      Александр, огромное спасибо. У вас очень хороший и полезный ресурс.
                  2. Vo # 0
                    Здравствуйте! Подскажите, пожалуйста, как в меню добавить разделители, чтобы получить что-то типа такого:
                    Main | Services | About us | Contacts
                    Спасибо.
                    1. Александр Мальцев # 0
                      Здравствуйте.
                      Это можно сделать с помощью стилей CSS.
                      Например так:
                      .navbar ul.nav>li {
                        border-right: 1px solid black;
                      }
                      .navbar ul.nav>li:last-of-type {
                        border-right: none;
                      }
                      
                      1. Vo # 0
                        Спасибо. Попробую.
                    2. Тимофей # 0
                      Шеф, привет! Подскажи пожайлуста, возможно ли сделать меню с расщепленными кнопками? Т.е. основная категория — в основном поле, а вложенные в нее подкатегории — в прикрепленной выпадайке.
                      Нужно по вот такому принципу:
                      Картинка
                      И потом разложить все это с помощью PdoMenu.
                      Буду благодарен за пример HTML — кода.
                      PS. Классный upload-ер!
                      1. Александр Мальцев # 0
                        Привет, Тимофей!
                        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>
                        
                        1. Александр Мальцев # 0
                          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>
                          
                        2. Тимофей # 0
                          Спасибо! Ты лучший! Немного переделал под свои нужды, т.к. твое меню с PDO не схлопывалось на мобильных. HTML-кода было вполне достаточно )).
                          Было бы круто, если бы у тебя получилось выделить время и написать урок в соответствующем разделе о том, как пользоваться редкими плейсхолдерами типа [[+classnames]] и [[+attributes]], а то достаточно сложно найти по ним информацию.
                          Постараюсь задонатить при первой возможности на твой сайт — подобные проекты должны развиваться.
                          1. Gleb # 0
                            Здравствуйте, у меня следующий вопрос.
                            Навигационное меню в bootstrap 3 class=«nav» при прокрутке страницы разделы меню подсвечиваются, указаны , пробую отменить подсветку разделов не могу найти как отключил скрипт скролла, не помогает.
                            Цель что бы при наведении мышкой раздел в меню подсвечивался, но при прокрутке страницы разделы не подсвечивались. Спасибо.
                            Вижу раздел «Пример совместного использования плагинов Affix и ScrollSpy» но описание отсутствует.
                            1. Александр Мальцев # 0
                              Здравствуйте, странное желание.
                              Можно так:
                              .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. Vo # 0
                              И снова здравствуйте! На этот раз ситуация такая: когда экран достигает такой ширины, что меню «сворачивается» в кнопку, при нажатии на эту кнопку появляется выпадающее меню. И вот это выпадающее меню сдвигает весь контент, который под ним, а хочется, чтобы оно отображалось «поверх» контента. Можно ли это сделать и если да, то как? И ещё хочется, чтобы при нажатии на любой из пунктов меню оно самостоятельно закрывалось опять «в кнопочку». Спасибо!
                              1. Александр Мальцев # 0
                                Здравствуйте.
                                Если Вам так это необходимо, то тут придётся для начала выполнить следующее действие:
                                .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 # 0
                                  Спасибо, попробую.
                              2. Arthur # 0
                                Как это меню сдвинуть влево чтоб добавить еще элементы. А в опере вообще после главной остальные пункты ушли вниз.
                                1. Александр Мальцев # 0
                                  Меню Bootstrap navbar занимает всю ширину контейнера в которое оно помещено.
                                  Куда его можно сдвинуть, если оно занимает всю ширину контейнера?
                                  Если его необходимо поместить в некоторый блок, то сделайте разметку и поместите его в этот блок.

                                  Бутстрап поддерживает следующие браузеры:
                                  Браузеры, которые официально поддерживает Bootstrap
                                  * Internet Explorer 8-11
                                2. Виктор # 0
                                  приветствую, а как сделать что бы то что вне меню (контент) не заезжал под меню, то есть меню с верху, и когда заходишь на сайт верхнее меню как бы поверх контента сверху размещается, а нужно что бы было меню а потом контент, но при прокрутке страницы меню оставалось сверху, вот ещё как сделать что бы меню было активным, у меня пункт с подпунктоми не разварачиваются
                                  1. Александр Мальцев # 0
                                    Здравствуйте.
                                    Фиксированное меню 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. Виктор # 0
                                      css подключен js нет, а как его подключить?
                                      1. Александр Мальцев # 0
                                        Это описано на уроке Bootstrap 3 — Начало работы в разделе Шаг 2. Подключение платформы Bootstrap 3 к веб-странице.
                                  2. Виктор # 0
                                    Большое спасибо за помощь, я попробую так сделать. Это реально первый сайт который я встретил где реально помогают!!! С НОВЫМ ГОДОМ!!! ЖЕЛАЮ ВСЕХ БЛАГ!!!
                                    1. Александр Мальцев # 0
                                      Спасибо. Вас тоже с наступившим 2016 годом!
                                      Стараюсь, по возможности отвечать на все комментарии :)
                                    2. Иван # 0
                                      Подскажите как выравнивать ссылки в навигационном меню по всей ширине, а то сейчас они прилипают к левому краю, хотелось бы что бы выравнивались по всему контейнеру как например группы кнопок, красивее получается
                                      1. Александр Мальцев # 0
                                        А почему бы тогда его не использовать. В качестве меню можно использовать не только 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. Иван # 0
                                          навбар нужен для того чтобы при входе с мобильных устройств меню отображалось с помощью иконки, которая при нажатии раздвигается и выводит список, к сожалению я не нашел способа как это сделать при помощи группы кнопок
                                          1. Иван # 0
                                            Александр посмотрел ваш пример, спасибо за помощь!
                                        2. Дмитрий # 0
                                          Подскажите пожалуйста, как справиться с такой проблемой (Bootstrap 4):
                                          1.В 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. Александр Мальцев # 0
                                            Подключить библиотеку библиотеку tether.min.js перед подключением bootstrap.min.js. Скачать можете по ссылке которую привели.
                                            Данная строчка в файле bootstrap.min.js проверяет подключен ли Tether, и если не подключен, то выбрасывает исключение, которые Вы привели.
                                            <script src="/путь/до/tether.min.js"></script>
                                            
                                          2. Федор # 0
                                            Здравствуйте. Не получается скорректировать 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. Александр Мальцев # 0
                                              Здравствуйте, Фёдор.
                                              В CSS Вы пытаетесь это сделать для активного пункта меню, а я как понимаю, Вам необходимо это сделать для всех. Кроме этого, у background-color нет значения none.
                                              Вам необходимо изменить код CSS на следующий:
                                              .navbar-nav>li>a:hover,
                                              .navbar-nav>li>a:focus {
                                                color: green;
                                                background-color: transparent;
                                              }
                                              
                                              1. Федор # 0
                                                Все равно фон пунктов остается
                                                1. Александр Мальцев # 0
                                                  Если необходимо и для выпадающего, то сделайте так:
                                                  .navbar-nav a:hover,
                                                  .navbar-nav a:focus {
                                                    color: green;
                                                    background-color: transparent !important;
                                                  }
                                                  </style>
                                                  
                                                  Для гарантии можете добавить !important.
                                                  1. Федор # 0
                                                    Спасибо за помощь, Александр! Частично помогло. Только вот в выпадающем списке по прежнему почему-то фон для пунктов (Пункт1, Пункт2, Пункт3) остается, либо я что-то не так делаю(((
                                                    Причем как интересно получается: в горизонтальном расположении меню, у пунктов выпадающего списка фон ЕСТЬ. А в вертикальном расположении меню (если сузить окно браузера), у пунктов выпадающего списка фона НЕТ. Странно
                                            2. Иван # 0
                                              Такой вопрос. Если нужно чтобы изначально меню располагалось под шапкой, и только потом как начинаем прокручивать страницу вниз оно фиксировалось сверху.Как это сделать?
                                              1. Александр Мальцев # 0
                                                Это делается с помощью плагина 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%;
                                                }
                                                
                                              2. Александр # 0
                                                Здравствуйте.
                                                1. а как сделать еще 1 уровень вложенности?
                                                2. а как сделать, чтобы dropdown открывалось по наведению указателя, а не по щелчку?
                                                1. Александр Мальцев # 0
                                                  Попробуйте SmartMenus. Данное меню полностью адаптивное и многоуровневое.
                                                  Страница проекта:
                                                  _http://www.smartmenus.org/
                                                  Демо:
                                                  _http://vadikom.github.io/smartmenus/src/demo/
                                                  Bootstrap Second Level:
                                                  _http://codepen.io/anon/pen/BjQqPO
                                                2. Дмитрий # 0
                                                  Здравствуйте! помогите пожалуйста советом. Решил сделать навигацию внутри страницы на якорях, но из-за плавающего навбара на Bootstrap3, столкнулся с проблемой — навбар закрывает 50 пикселей нужного пространства. Для боди прописал паддинг-топ:50пкс, помогло.
                                                  Затем использовал ваш пример:
                                                  #preim:before { 
                                                    display: block; 
                                                    content: " "; 
                                                    padding-top: -50px; 
                                                    height: 50px; 
                                                    visibility: hidden; 
                                                  }
                                                  
                                                  Проблема тоже решилась, но тут же породилась новая — появляется разрыв в 50 пикселей. И как назло в таком месте, где никак не спрячешь, белый фон. Есть конечно вариант сделать очень широкой полосу с текстом, но это уже крайности. Может есть какой ещё вариант избавиться от этого? Я вот подумываю в сторону z-index, но пока ещё особо не понимаю как сделать, возможно и ошибаюсь.
                                                  Изображение
                                                  1. Стас # 0
                                                    как решили эту проблему?
                                                    1. Александр Мальцев # 0
                                                      А в чём проблема?
                                                      Например, добавляете ко всем необходимым заголовкам класс 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. User # 0
                                                    А как скопировать только верхнее меню к себе на сайт? На своем сайте нравится все, кроме этого меню))
                                                    В html разобрался, а вот из css bootstrap скопировал в свой css все строчки с navbar, и меню в результате сломалось)
                                                    Так же интересно, js файлы тоже копировать для работы только меню?
                                                    1. Александр Мальцев # 0
                                                      Перейти на страницу 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. Иван Хорошилов # 0
                                                      Добрый день!
                                                      Можно попросить совета, как сделать подсветку названия той категории, в которой нахожусь в данный момент? В какую категорию бы не зашел, или ничего не подсвечивается, или активен 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. Александр Мальцев # 0
                                                        Это действие обычно выполняется на сервере, посредством добавления класса active к нужному пункту меню.
                                                      2. Игорь # 0
                                                        Здравствуйте! помогите пожалуйста! Нужно сделать меню fixed-top, но при просмотре на мобильном экране, чтобы оно пропадало и появлялось только при переходе к началу страницы. Заранее спасибо.
                                                        1. Александр Мальцев # +1
                                                          Здравствуйте.
                                                          Насколько я понимаю, Вам необходимо на 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 # 0
                                                            Спасибо! Прекрасно работает!
                                                            Новая проблема!
                                                            При развернутом меню, если нажать на кнопку оно не сворачивается. Мышкой еще получается по двойному или тройному клику, а вот пальцем не всегда удается. Образец взят у вас из урока. Заранее спасибо.
                                                            1. igor # 0
                                                              Спасибо! ошибку нашел сам.
                                                              1. Сергей # 0
                                                                Привет. Столкнулся с такой же проблемой. Если не трудно, поделись, пожалуйста, какую именно ошибку ты нашел. Бьюсь — не могу найти. Спасибо тебе заранее.
                                                                1. igor # 0
                                                                  Честно! Уже не помню, потому что ошибка была элементарная (синтаксическая или закрытие тега потерял), а может свои изменения css убрал, чтобы конфликта с bootstrap не было…
                                                                  Извини…
                                                        2. Андрей # 0
                                                          Добрый день. Помогите, пожалуйста, нужно разместить текст в навигационной панели (по сути это заголовок страницы), чтобы он был по центру оставшегося свободного пространства после названия сайта, меню и прочих элементов.
                                                          Фото
                                                          1. Александр Мальцев # 0
                                                            Это можно выполнить так.
                                                            Добавить в 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. Андрей # 0
                                                              Спасибо большое, помогло!
                                                          2. igor # 0
                                                            Здравствуйте!
                                                            При добавлении скрипта взятого из второго ответа за 17 декабря вылезает проблема!
                                                            — при переключении с одного пункта меню на другой проскакивает горизонтальная прокрутка, прямо на месте меню. При третьем переключении этот эффект пропадает, до обновления страницы.
                                                            Скрипт вынесен в отдельный файл.
                                                            //при нажатии на ссылку
                                                            $(".navbar-collapse a").click(function() {
                                                              //если она не имеет класс dropdown-toggle
                                                              if (!$(this).hasClass("dropdown-toggle")) {
                                                                //то закрыть меню
                                                                $(".navbar-collapse").collapse('hide');
                                                              }
                                                            });
                                                            Cкрин прилагаю:
                                                            Скриншот
                                                            1. Александр Мальцев # +1
                                                              Здравствуйте!
                                                              Покажите Вашу ситуацию на jsfiddle или на чём-то подобном.
                                                              Так как у меня ничего такого не возникает.
                                                              1. igor # 0
                                                                А можно я вам на почту сброшу шаблон с которым я работаю?
                                                            2. igor # 0
                                                              Огромное спасибо!
                                                              Ваш сайт лучший!
                                                              И помощь реальная!
                                                              1. александр морозов # 0
                                                                Добрый день, действительно хорошая статья, спасибо.
                                                                Никак не могу решить проблему, и у Вас тоже ничего не написано.
                                                                Если меню прижать к низу, то после того как оно «схлопывается», при наведении на гамбургер оно пытается раскрыться вниз, а там конец страницы и ничего не происходит. Можно как-то сделать, чтобы оно раскрывалось вверх?
                                                                1. Александр Мальцев # 0
                                                                  Здравствуйте, меню navbar, как Вы описали выше, так и работает. Дополнительно ничего настраивать не требуется.
                                                                  <nav class="navbar navbar-default navbar-fixed-bottom">
                                                                  ...
                                                                  </nav>
                                                                  
                                                                  Если у Вас что-то не работает, то проверьте, есть ли ошибки (в Chrome — клавиша F12, вкладка Console).
                                                                2. Тимур # 0
                                                                  Здравствуйте! Подскажите пожалуйста, как сделать что бы при переходе на пункт выпадающего меню, основной пункт меню, под которым оно находиться становилось нужного цвета? И ещё похожий вопрос, когда переходишь из пункта выпадающего меню в пункт субменю, что бы пункт выпадающего меню оставался подсвеченным. Все как в примере _http://visavik.com. Bootstrap 3
                                                                  1. Александр Мальцев # 0
                                                                    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. Тимур # 0
                                                                      в 1 пункте не получилось что то, перехожу в пункт подменю, ничего не проиходит
                                                                      1. Тимур # 0
                                                                        весь день ищу, ничего не получается. Почему когда нажимаю на пункт dropdown меню, основной пункт не меняет цвет:(
                                                                    2. Тимур # 0
                                                                      И ещё вопрос, как в выпадающем меню сделать разделительные полоски в том же примере
                                                                      1. Александр Мальцев # 0
                                                                        Разделительные полоски можно добавить так:
                                                                        .dropdown-menu li {
                                                                            border-bottom: 1px solid #e5e5e5;;
                                                                        }
                                                                        
                                                                      2. Тимур # 0
                                                                        Извиняюсь за назойливость, но возник тут же ещё вопрос. Как сделать такое меню, как в примере выше, в маленьком окне? У меня появляется скролл и выпадающее меню ложится под контент
                                                                        1. Александр Мальцев # 0
                                                                          Перекрытие элементов определяется свойством z-index. Следовательно, другой контент имеет более высокое значение, чем оно установлено у выпадающего меню. Значение z-index по умолчанию у dropdown-menu составляет 1000.
                                                                          1. Тимур # 0
                                                                            Спасибо Вам большое! Все получилось)
                                                                        2. Марина # 0
                                                                          Спасибо за ваши уроки! Это лучшее, что есть в рунете по Бутстрапу.

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

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

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

                                                                          1. Александр Мальцев # 0
                                                                            Марина, спасибо.
                                                                            Меню navbar у Вас скорее расположено в каком-то другом блоке, который имеет position отличную от static (например: fixed). Поэтому у Вас получается не так как хочется. Изменять position:relative не стоит, т.к. в этом случае у Вас не будут правильно отображаться выпадающие меню. Правильное решение в этой ситуации — это создать правильную разметку.
                                                                            navbarCollapse — это просто идентификатор, который можно указать любым. Он нужен для того, чтобы в мобильной версии меню можно было вызвать по кнопке.
                                                                          2. OdIUm # 0
                                                                            Добрый день.

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

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

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

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

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

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

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

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

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

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

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


                                                                            Буду рад за совет где поискать и что почитать про настройку адаптации.
                                                                            1. Александр Мальцев # 0
                                                                              Необходимо подобрать точку сворачивания navbar. Т.е. ширину экрана при котором меню будет сворачиваться в мобильный вид.
                                                                              Наиболее просто это сделать на странице _http://getbootstrap.com/customize/#grid-system. На ней необходимо изменить значение переменной @grid-float-breakpoint на необходимое значение (например, 1000px). Данная установка будет означать, что меню navbar будет иметь мобильный вид уже с 999px. После этого необходимо скомпилировать и скачать сборку.
                                                                              Можете также изменить и размер шрифта:
                                                                              .navbar-collapse {
                                                                                font-size: 12px;
                                                                              }
                                                                              
                                                                              Для выравнивания элементов по правому краю используйте класс navbar-right.
                                                                              1. OdIUm # 0
                                                                                Спасибо большое! Попробую.
                                                                                1. Ильнур # 0
                                                                                  А где можно поправить этот параметр в уже загруженном бутстрапе? поиск в файле bootstrap.min.css по имени grid-float-breakpoint ничего не дает(
                                                                                  1. Александр Мальцев # 0
                                                                                    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. Михаил # 0
                                                                                Здравствуйте. Как и все мы, за советом. После подключения плагина 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. Александр Мальцев # 0
                                                                                  Здравствуйте, посмотрите ответ здесь:
                                                                                  Как правильно зафиксировать колонку на 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. Михаил # 0
                                                                                    Извините ещё раз, я наверное не правильно объяснил. У меня при прокрутке блок (ABOUT) наезжает на меню и оно пропадает, а когда этот блок прокручивается меню появляется и с последующими блоками уже нормально. Предполагаю что стили не правильно установил. Может взгляните?
                                                                                    _http://plnkr.co/edit/VU2bROs0OVpLFzryL056?p=preview
                                                                                    1. Михаил # 0
                                                                                      Спасибо, разобрался. Но сейчас появилась под меню полоса примерно в 10px. Ну никак не могу с ней справиться. Может подскажите как от неё избавиться? Спасибо
                                                                                      Изображение
                                                                                      1. Александр Мальцев # 0
                                                                                        Скорее всего, это отступ. Измените его на значение 0px.
                                                                                        1. Михаил # 0
                                                                                          Как всё просто :) Спасибо
                                                                                2. OdIUm # 0
                                                                                  Здравствуйте. Вновь должен обратиться к Вам за советом.
                                                                                  Создал навигационное меню:
                                                                                  <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. Александр Мальцев # 0
                                                                                    Это отступ navbar.
                                                                                    Если он Вам не нужен, то сделайте так:
                                                                                    /* CSS */
                                                                                    .navbar {
                                                                                      margin-bottom: 0px;
                                                                                    }
                                                                                    
                                                                                  2. Burboss # 0
                                                                                    Александр, здравствуйте.
                                                                                    Благодарю Вас за отличные уроки. Это лучшее, что есть в инете.
                                                                                    Вопрос: между брендом и собственно меню надо вставить картинку с телефонным номером.
                                                                                    Вставляю, так она, зараза, бегает то вверх, то вниз относительно середины блока.
                                                                                    Помогите разобраться, пожалуйста
                                                                                    1. Александр Мальцев # 0
                                                                                      Здравствуйте, спасибо.
                                                                                      Так и вставляйте её после бренда.
                                                                                      Например так (телефон в виде текста):
                                                                                      <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 # 0
                                                                                        Благодарю Вас, Александр.
                                                                                        1. Burboss # 0
                                                                                          Вставил текст «номер телефона», так он залип сверху блока и никак оттуда…
                                                                                      2. Burboss # 0
                                                                                        Отбой. Спасибо
                                                                                        1. Артур # 0
                                                                                          Здравствуйте! Подскажите пожалуйста. Имеется подменю 2 уровня. При его просмотре, родительское меню мне удалось сделать подсвеченным.
                                                                                          .navbar-nav > li:hover > a {
                                                                                          color: #fff;
                                                                                          background-color: #0165C2;
                                                                                          }
                                                                                          Вопрос? А как мне сделать, так что бы при клике на пункт подменю, его родитель оставался подсвеченным. Я как понимаю, это чрез active, но самостоятельно разобраться не получается
                                                                                          1. Артур # 0
                                                                                            Как сделать, чтобы при активном дочернем меню, родительское было активно (подсвечивалось)
                                                                                            1. Александр Мальцев # 0
                                                                                              Здравствуйте.
                                                                                              Добавить класс 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. Артур # 0
                                                                                              Спасибо! Получилось, добавив указанный вами код в .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. Александр Мальцев # 0
                                                                                                Попробуйте использовать следующий код.
                                                                                                Код
                                                                                                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. Никита # 0
                                                                                                Здравствуйте, Александр!

                                                                                                Сейчас делаю сайт (использую 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. Никита # 0
                                                                                                  Первый вопрос снимается, там же return не в конце, ужасная оплошность.
                                                                                                  1. Никита # 0
                                                                                                    Да и второй тоже, перепробовал кучу всего, но после 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. Руслан # 0
                                                                                                  Здравствуйте Александр. Помогите пожалуйста разобраться с иконками в меню. Есть пункт с выпадающим списком, ему задаю иконку, но она наследуется всеми вложенными подпунктами. Как сделать иконку только для текущего пункта?
                                                                                                  .menu-item-14 a:before {
                                                                                                      font-family: FontAwesome;
                                                                                                      content: "\f0ac";
                                                                                                      padding-right: 7px;
                                                                                                      font-weight: normal;
                                                                                                  }
                                                                                                  1. Александр Мальцев # 0
                                                                                                    Измени, чтобы использовалась только на детей:
                                                                                                    .menu-item-14>a:before {
                                                                                                        font-family: FontAwesome;
                                                                                                        content: "\f0ac";
                                                                                                        padding-right: 7px;
                                                                                                        font-weight: normal;
                                                                                                    }
                                                                                                    
                                                                                                    1. Руслан # 0
                                                                                                      Спасибо! Все получилось :)
                                                                                                  2. Руслан # 0
                                                                                                    И вопрос туда же. Хочу сделать иконку большего размера, но меню при этом растягивается по высоте, остальные пункты меню смещаются относительно пункта с иконкой. Как это можно исправить, не увеличивая текущей высоты navbar, и выравнять остальные пункты?
                                                                                                    1. Александр Мальцев # 0
                                                                                                      Например, иконку размером 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. сергей # 0
                                                                                                      привет! а есть отдельный .css для этого меню? выложи плиз))
                                                                                                      1. Александр Мальцев # 0
                                                                                                        Вот сборка состоящая из одного компонента navbar:
                                                                                                        getbootstrap.com/customize/?id=e4ae3166f551d396cc928acf43d4d66a

                                                                                                        В конце страницы нажми на кнопку «Compile and Download». В архиве будут 2 файла (bootstrap.css и bootstrap.js). Их необходимо подключить к странице.
                                                                                                      2. Дмитрий # 0
                                                                                                        Здравствуйте! У меня в мобильной версии когда кликаю на пункт меню, не раскрывается подменю. А если на обычном разрешении, то все работает нормально. Подскажите в чем проблема?
                                                                                                        1. Александр Мальцев # 0
                                                                                                          Здравствуйте! За раскрытие пункта подменю отвечает плагин Bootstrap Dropdowns и соответствующие стили. Если Вы используете полную версию Bootstrap, и данные плагины и стили включены в файлы bootstrap.js и boostrap.css, то необходимо проверить не оказывает ли на работу влияние сторонние стили или скрипты. Попробуйте отключить всё кроме Bootstrap и библиотеки jQuery, и проверить.
                                                                                                        2. JOYsticK # 0
                                                                                                          Впервые пробую работать с bootstrap, скачал готовый шаблон, в котором идет переход по якорям
                                                                                                          <li><a href="#top">Главная</a></li>
                                                                                                          и тд. Но если поставить в ссылку
                                                                                                          <li><a href="index.html#top">Главная</a></li>
                                                                                                          , то при клике мышкой перехода не будет, подскажите как разрешить переход?
                                                                                                          1. Александр Мальцев # 0
                                                                                                            Переход будет на страницу (если не используется тег 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 # 0
                                                                                                              такой метод пробовал, элемент base в обще не получилось применить.
                                                                                                              а вот
                                                                                                              <a href="http://мойсайт/index.html">Главная</a>
                                                                                                              так же как и
                                                                                                              <a href="/index.html">Главная</a>
                                                                                                              при наведении мышкой показывает ссылку, если нажать правой мышкой и в контекстном меню выбрать открыть в новом окне то откроется главная, а если нажать левый мышкой то ничего не происходит, левой мышкой работают только якоря.
                                                                                                              1. JOYsticK # 0
                                                                                                                вот сам шаблон, если конечно есть время с этим помочь разобраться.
                                                                                                                1. JOYsticK # 0
                                                                                                                  спасибо за ответы, разобрался, дело было Single Page Nav Plugin JS.
                                                                                                              2. Фарход # 0
                                                                                                                Ребята помогите с проблемой, когда меню схлопывается(для маленьких экранов) и появляется кнопка для раскрытия меню, у меня на сайте есть слайдер и вот когда меню открывается оно проходит под слайдером, вместо того что бы его сдвигать вниз?
                                                                                                                1. Александр Мальцев # 0
                                                                                                                  Настройка положения элементов по оси Z осуществляется с помощью CSS свойства z-index.
                                                                                                                  Вам необходимо сделать что-то подобное этому:
                                                                                                                  .navbar .nav > li {
                                                                                                                    z-index: 10001;
                                                                                                                  }
                                                                                                                  
                                                                                                                2. Вячеслав # 0
                                                                                                                  Здравствуйте, Александр, подскажите пжлста с вопросом:
                                                                                                                  — bootstrap 3
                                                                                                                  — в одной строке «навигационное меню» по сайту и меню «входа/регистрации»
                                                                                                                  Вопрос — есть ли возможность схлопывания меню в кнопку (с выпадающим вертикальным меню) при разных разрешениях экрана. Т.е. чтобы меню входа/регистрации схлопывалось при разрешении 992px, а основное меню схлопывалось в кнопку при разрешении 768px?
                                                                                                                  Заранее спасибо за ответ
                                                                                                                  1. Александр Мальцев # 0
                                                                                                                    С помощью медиа запросов. Основное меню и так будет схлопываться при разрешении 768px. А вот для регистрации необходимо будет создать два состояния меню. Одно будет видно при разрешения больше 992px, а другое когда данная ширина меньше.
                                                                                                                    1. Вячеслав # 0
                                                                                                                      Это получается для меню регистрации необходимо отдельные классы создавать, копировать CSS отвечающий за схлопывание при 768px, переписывать в этом CSS классы для регистрации и выставлять значение схлопывания 992px?
                                                                                                                      1. Александр Мальцев # 0
                                                                                                                        Не знаю как там у Вас.
                                                                                                                        Можно например сделать так:
                                                                                                                        <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>
                                                                                                                        

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