Bootstrap 3 - Навигационное меню Navbar

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

Создание навигационного меню в Twitter Bootstrap 3

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

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

Создание навигационного меню в Twitter Bootstrap 3 осуществляется посредством компонента navbar. HTML-код структуры данного меню имеет следующий вид:

<!-- Меню navbar -->
<nav class="navbar navbar-default">
  <!-- Бренд и переключатель, который вызывает меню на мобильных устройствах -->
  <div class="navbar-header">
    <!-- Кнопка с полосочками, которая открывает меню на мобильных устройствах -->
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" 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 href="#" class="navbar-brand">Бренд</a>
  </div>
  <!-- Содержимое меню (коллекция навигационных ссылок, формы и др.) -->
  <div class="collapse navbar-collapse" id="main-menu" >
      <!-- Список ссылок, расположенных слева -->
    <ul class="nav navbar-nav">
      <!--Элемент с классом active отображает ссылку подсвеченной -->
      <li class="active"><a href="#">Главная <span class="sr-only">(current)</span></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>

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

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

Добавление форм в navbar

Помещение формы в навигационное меню navbar осуществляется посредством HTML элемента form, к которому необходимо добавить класс navbar-form. Данный класс осуществляет корректное положение формы в адаптивном меню Bootstrap 3.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="">
  </div>
  <button type="submit" class="btn btn-default">Найти</button>
</form>

Добавление кнопок в navbar

При размещении кнопок в навигационном меню Bootstrap (вне формы), к ним (элементам button или a) необходимо добавить класс navbar-btn. Данный класс предназначен для того, чтобы откорректировать положение кнопки в navbar, т.е. выровнять её по вертикали.

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

Добавление текста (надписи) в navbar

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

<p class="navbar-text">Вошёл под именем Jhon</p>

Размещение ссылок в navbar вне основной навигации

При размещении обычных ссылок вне стандартного навигационного компонента navbar (элемента ul с классами nav и navbar-nav) к ним необходимо добавить класс navbar-link. Это обеспечит правильное отображение ссылок, расположенным вне основной навигации, внутри компонента navbar.

<p class="navbar-text navbar-right">Вошёл как <a href="#" class="navbar-link">John</a></p>

Выравнивание компонентов в navbar

Для выравнивания компонентов (гиперссылок, форм, кнопок и текста) применяйте служебные классы Bootstrap 3 navbar-left или navbar-right. Эти классы позволяет выровнять элемент по левому или правому краю внутри навигационного меню.

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

Примечание: Выравнивание множества элементов по правому краю не поддерживается в Twitter Bootstrap 3.

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

<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 3 также позволяет создавать фиксированные навигационные меню. Фиксированное меню – это такое, которое можно прикрепить к верхней или нижней части страницы так, что оно будет находиться в этом положении всегда, т.е. независимо от текущего положения прокрутки страницы.

Для прикрепления навигационного меню navbar к верхней части страницы необходимо к нему добавить дополнительный класс navbar-fixed-top. Т.е. добавить этот класс туда, где расположены классы навигационного меню navbar и navbar-default. Кроме этого, содержимое меню желательно поместить в контейнер с классом container или container-fluid. Это действие обеспечит центрирование меню относительно краёв страницы, а также установит необходимые отступы для его содержимого.

Обратите внимание на то, что после перевода навигационного меню navbar в фиксированное состояние оно будет накладываться на содержимое страницы. Это будет происходить из-за того, что оно (меню) будет выдернуто из нормального потока расположения элементов, и располагаться уже поверх них. Чтобы это исправить необходимо добавить к открывающему тегу body CSS-свойство padding-top.

Например, установим для основного содержимого страницы отступ padding-top, равный 70 пикселей (по умолчанию навигационное меню имеет высоту 50px):

body { padding-top: 70px; }

Этот стиль необходимо располагать после подключения стандартных стилей Bootstrap (bootstrap.css или bootstrap.min.css).

<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>

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

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

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

Аналогично, чтобы создать навигационное меню, прикрепленного к нижней части страницы необходимо добавить дополнительный класс .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    116353 +1

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

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

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

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

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

                    И не сочтите совсем уж за наглость, а можно как-то после перехода по ссылке, div[id] подсветить средствами CSS?
                    1. Александр Мальцев 21 августа 2015, 13:26 # 0
                      :target {
                        background: yellow;
                      }
                      
                      1. Сергей 21 августа 2015, 14:04 # 0
                        Спасибо, то что нужно!
                        пришлось только поменять цвет на выделение bold, т.к. блок у нас же стал выше после :before. Но выделение цветом и не важно, главное понятно на каком тексте фокус.
            2. antant 15 сентября 2015, 01:59 # 0
              Очень нужно сделать высоту навбара в 25px, полдня убил, ничего не смог найти, тупо пересобрал BS под себя в высотой навбара 25, но это э не то :(, подскажите плиз стиль где задается эта высота
              1. Александр Мальцев 15 сентября 2015, 13:15 # 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. Влад 14 октября 2015, 15:35 # 0
                Что-то у меня в мобильной версии когда кликаю на Новости, не раскрывается подменю, а меню сворачивается. Когда в версии для компа, то все работает нормально.
                1. noname 30 октября 2015, 17:14 # 0
                  Подскажите, пожалуйста, как привязать Easing эффекты на dropdown-menu?
                  1. Александр Мальцев 01 ноября 2015, 03:19 # 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 01 ноября 2015, 13:02 # 0
                      Александр, огромное спасибо. У вас очень хороший и полезный ресурс.
                  2. Vo 11 ноября 2015, 12:05 # 0
                    Здравствуйте! Подскажите, пожалуйста, как в меню добавить разделители, чтобы получить что-то типа такого:
                    Main | Services | About us | Contacts
                    Спасибо.
                    1. Александр Мальцев 11 ноября 2015, 14:44 # 0
                      Здравствуйте.
                      Это можно сделать с помощью стилей CSS.
                      Например так:
                      .navbar ul.nav>li {
                        border-right: 1px solid black;
                      }
                      .navbar ul.nav>li:last-of-type {
                        border-right: none;
                      }
                      
                      1. Vo 11 ноября 2015, 15:42 # 0
                        Спасибо. Попробую.
                    2. Тимофей 26 ноября 2015, 16:39 # 0
                      Шеф, привет! Подскажи пожайлуста, возможно ли сделать меню с расщепленными кнопками? Т.е. основная категория — в основном поле, а вложенные в нее подкатегории — в прикрепленной выпадайке.
                      Нужно по вот такому принципу:
                      Картинка
                      И потом разложить все это с помощью PdoMenu.
                      Буду благодарен за пример HTML — кода.
                      PS. Классный upload-ер!
                      1. Александр Мальцев 28 ноября 2015, 13:55 # 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. Александр Мальцев 28 ноября 2015, 13:59 # 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. Тимофей 28 ноября 2015, 17:23 # 0
                          Спасибо! Ты лучший! Немного переделал под свои нужды, т.к. твое меню с PDO не схлопывалось на мобильных. HTML-кода было вполне достаточно )).
                          Было бы круто, если бы у тебя получилось выделить время и написать урок в соответствующем разделе о том, как пользоваться редкими плейсхолдерами типа [[+classnames]] и [[+attributes]], а то достаточно сложно найти по ним информацию.
                          Постараюсь задонатить при первой возможности на твой сайт — подобные проекты должны развиваться.
                          1. Gleb 14 декабря 2015, 14:35 # 0
                            Здравствуйте, у меня следующий вопрос.
                            Навигационное меню в bootstrap 3 class=«nav» при прокрутке страницы разделы меню подсвечиваются, указаны , пробую отменить подсветку разделов не могу найти как отключил скрипт скролла, не помогает.
                            Цель что бы при наведении мышкой раздел в меню подсвечивался, но при прокрутке страницы разделы не подсвечивались. Спасибо.
                            Вижу раздел «Пример совместного использования плагинов Affix и ScrollSpy» но описание отсутствует.
                            1. Александр Мальцев 15 декабря 2015, 06:51 # 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 16 декабря 2015, 20:34 # 0
                              И снова здравствуйте! На этот раз ситуация такая: когда экран достигает такой ширины, что меню «сворачивается» в кнопку, при нажатии на эту кнопку появляется выпадающее меню. И вот это выпадающее меню сдвигает весь контент, который под ним, а хочется, чтобы оно отображалось «поверх» контента. Можно ли это сделать и если да, то как? И ещё хочется, чтобы при нажатии на любой из пунктов меню оно самостоятельно закрывалось опять «в кнопочку». Спасибо!
                              1. Александр Мальцев 17 декабря 2015, 07:42 # 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 17 декабря 2015, 10:10 # 0
                                  Спасибо, попробую.
                              2. Arthur 29 декабря 2015, 17:43 # 0
                                Как это меню сдвинуть влево чтоб добавить еще элементы. А в опере вообще после главной остальные пункты ушли вниз.
                                1. Александр Мальцев 30 декабря 2015, 10:39 # 0
                                  Меню Bootstrap navbar занимает всю ширину контейнера в которое оно помещено.
                                  Куда его можно сдвинуть, если оно занимает всю ширину контейнера?
                                  Если его необходимо поместить в некоторый блок, то сделайте разметку и поместите его в этот блок.

                                  Бутстрап поддерживает следующие браузеры:
                                  Браузеры, которые официально поддерживает Bootstrap
                                  * Internet Explorer 8-11
                                2. Виктор 30 декабря 2015, 19:20 # 0
                                  приветствую, а как сделать что бы то что вне меню (контент) не заезжал под меню, то есть меню с верху, и когда заходишь на сайт верхнее меню как бы поверх контента сверху размещается, а нужно что бы было меню а потом контент, но при прокрутке страницы меню оставалось сверху, вот ещё как сделать что бы меню было активным, у меня пункт с подпунктоми не разварачиваются
                                  1. Александр Мальцев 31 декабря 2015, 11:08 # 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. Виктор 31 декабря 2015, 19:51 # 0
                                      css подключен js нет, а как его подключить?
                                      1. Александр Мальцев 01 января 2016, 15:46 # 0
                                        Это описано на уроке Bootstrap 3 — Начало работы в разделе Шаг 2. Подключение платформы Bootstrap 3 к веб-странице.
                                  2. Виктор 31 декабря 2015, 17:10 # 0
                                    Большое спасибо за помощь, я попробую так сделать. Это реально первый сайт который я встретил где реально помогают!!! С НОВЫМ ГОДОМ!!! ЖЕЛАЮ ВСЕХ БЛАГ!!!
                                    1. Александр Мальцев 01 января 2016, 15:50 # 0
                                      Спасибо. Вас тоже с наступившим 2016 годом!
                                      Стараюсь, по возможности отвечать на все комментарии :)
                                    2. Иван 11 января 2016, 11:34 # 0
                                      Подскажите как выравнивать ссылки в навигационном меню по всей ширине, а то сейчас они прилипают к левому краю, хотелось бы что бы выравнивались по всему контейнеру как например группы кнопок, красивее получается
                                      1. Александр Мальцев 11 января 2016, 16:05 # 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. Иван 11 января 2016, 16:28 # 0
                                          навбар нужен для того чтобы при входе с мобильных устройств меню отображалось с помощью иконки, которая при нажатии раздвигается и выводит список, к сожалению я не нашел способа как это сделать при помощи группы кнопок
                                          1. Иван 11 января 2016, 16:45 # 0
                                            Александр посмотрел ваш пример, спасибо за помощь!
                                        2. Дмитрий 24 января 2016, 15:14 # 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. Александр Мальцев 24 января 2016, 15:49 # 0
                                            Подключить библиотеку библиотеку tether.min.js перед подключением bootstrap.min.js. Скачать можете по ссылке которую привели.
                                            Данная строчка в файле bootstrap.min.js проверяет подключен ли Tether, и если не подключен, то выбрасывает исключение, которые Вы привели.
                                            <script src="/путь/до/tether.min.js"></script>
                                            
                                          2. Федор 25 января 2016, 12:22 # 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. Александр Мальцев 25 января 2016, 13:01 # 0
                                              Здравствуйте, Фёдор.
                                              В CSS Вы пытаетесь это сделать для активного пункта меню, а я как понимаю, Вам необходимо это сделать для всех. Кроме этого, у background-color нет значения none.
                                              Вам необходимо изменить код CSS на следующий:
                                              .navbar-nav>li>a:hover,
                                              .navbar-nav>li>a:focus {
                                                color: green;
                                                background-color: transparent;
                                              }
                                              
                                              1. Федор 25 января 2016, 13:30 # 0
                                                Все равно фон пунктов остается
                                                1. Александр Мальцев 25 января 2016, 13:53 # 0
                                                  Если необходимо и для выпадающего, то сделайте так:
                                                  .navbar-nav a:hover,
                                                  .navbar-nav a:focus {
                                                    color: green;
                                                    background-color: transparent !important;
                                                  }
                                                  </style>
                                                  
                                                  Для гарантии можете добавить !important.
                                                  1. Федор 25 января 2016, 22:05 # 0
                                                    Спасибо за помощь, Александр! Частично помогло. Только вот в выпадающем списке по прежнему почему-то фон для пунктов (Пункт1, Пункт2, Пункт3) остается, либо я что-то не так делаю(((
                                                    Причем как интересно получается: в горизонтальном расположении меню, у пунктов выпадающего списка фон ЕСТЬ. А в вертикальном расположении меню (если сузить окно браузера), у пунктов выпадающего списка фона НЕТ. Странно
                                            2. Иван 26 января 2016, 15:11 # 0
                                              Такой вопрос. Если нужно чтобы изначально меню располагалось под шапкой, и только потом как начинаем прокручивать страницу вниз оно фиксировалось сверху.Как это сделать?
                                              1. Александр Мальцев 27 января 2016, 12:16 # 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%;
                                                }
                                                
                                                1. Сергей 01 февраля 2017, 17:55 # 0
                                                  При этом на navbar накладываются все элементы сайта, если выставить ему z-index проблема решается, но он начинает накладываться в свою очередь поверх overlay… как быть в этом случае?
                                                  1. Александр Мальцев 03 февраля 2017, 17:09 # 0
                                                    Установить navbar значение z-index больше чем у других элементов сайта, но меньше чем у overlay. Или overlay установить большее значение z-index.
                                                    1. Сергей 04 февраля 2017, 09:18 # 0
                                                      Спасибо за комментарий! я это понимал, но z-index оверлею не выставлялся. Может кому пригодится — drupal overley по умолчанию z-index 500
                                              2. Александр 15 февраля 2016, 15:26 # 0
                                                Здравствуйте.
                                                1. а как сделать еще 1 уровень вложенности?
                                                2. а как сделать, чтобы dropdown открывалось по наведению указателя, а не по щелчку?
                                                1. Александр Мальцев 17 февраля 2016, 12:07 # 0
                                                  Попробуйте SmartMenus. Данное меню полностью адаптивное и многоуровневое.
                                                  Страница проекта:
                                                  _http://www.smartmenus.org/
                                                  Демо:
                                                  _http://vadikom.github.io/smartmenus/src/demo/
                                                  Bootstrap Second Level:
                                                  _http://codepen.io/anon/pen/BjQqPO
                                                2. Дмитрий 23 февраля 2016, 09:00 # 0
                                                  Здравствуйте! помогите пожалуйста советом. Решил сделать навигацию внутри страницы на якорях, но из-за плавающего навбара на Bootstrap3, столкнулся с проблемой — навбар закрывает 50 пикселей нужного пространства. Для боди прописал паддинг-топ:50пкс, помогло.
                                                  Затем использовал ваш пример:
                                                  #preim:before { 
                                                    display: block; 
                                                    content: " "; 
                                                    padding-top: -50px; 
                                                    height: 50px; 
                                                    visibility: hidden; 
                                                  }
                                                  
                                                  Проблема тоже решилась, но тут же породилась новая — появляется разрыв в 50 пикселей. И как назло в таком месте, где никак не спрячешь, белый фон. Есть конечно вариант сделать очень широкой полосу с текстом, но это уже крайности. Может есть какой ещё вариант избавиться от этого? Я вот подумываю в сторону z-index, но пока ещё особо не понимаю как сделать, возможно и ошибаюсь.
                                                  Изображение
                                                  1. Стас 04 сентября 2016, 18:56 # 0
                                                    как решили эту проблему?
                                                    1. Александр Мальцев 05 сентября 2016, 11:54 # 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 10 марта 2016, 21:04 # 0
                                                    А как скопировать только верхнее меню к себе на сайт? На своем сайте нравится все, кроме этого меню))
                                                    В html разобрался, а вот из css bootstrap скопировал в свой css все строчки с navbar, и меню в результате сломалось)
                                                    Так же интересно, js файлы тоже копировать для работы только меню?
                                                    1. Александр Мальцев 11 марта 2016, 15:13 # 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. Иван Хорошилов 12 марта 2016, 15:47 # 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. Александр Мальцев 15 марта 2016, 13:46 # 0
                                                        Это действие обычно выполняется на сервере, посредством добавления класса active к нужному пункту меню.
                                                      2. Игорь 18 марта 2016, 01:01 # 0
                                                        Здравствуйте! помогите пожалуйста! Нужно сделать меню fixed-top, но при просмотре на мобильном экране, чтобы оно пропадало и появлялось только при переходе к началу страницы. Заранее спасибо.
                                                        1. Александр Мальцев 19 марта 2016, 10:55 # +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 19 марта 2016, 21:00 # 0
                                                            Спасибо! Прекрасно работает!
                                                            Новая проблема!
                                                            При развернутом меню, если нажать на кнопку оно не сворачивается. Мышкой еще получается по двойному или тройному клику, а вот пальцем не всегда удается. Образец взят у вас из урока. Заранее спасибо.
                                                            1. igor 20 марта 2016, 00:58 # 0
                                                              Спасибо! ошибку нашел сам.
                                                              1. Сергей 13 апреля 2016, 21:30 # 0
                                                                Привет. Столкнулся с такой же проблемой. Если не трудно, поделись, пожалуйста, какую именно ошибку ты нашел. Бьюсь — не могу найти. Спасибо тебе заранее.
                                                                1. igor 16 апреля 2016, 23:08 # 0
                                                                  Честно! Уже не помню, потому что ошибка была элементарная (синтаксическая или закрытие тега потерял), а может свои изменения css убрал, чтобы конфликта с bootstrap не было…
                                                                  Извини…
                                                        2. Андрей 19 марта 2016, 23:47 # 0
                                                          Добрый день. Помогите, пожалуйста, нужно разместить текст в навигационной панели (по сути это заголовок страницы), чтобы он был по центру оставшегося свободного пространства после названия сайта, меню и прочих элементов.
                                                          Фото
                                                          1. Александр Мальцев 23 марта 2016, 11:39 # 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. Андрей 28 марта 2016, 17:30 # 0
                                                              Спасибо большое, помогло!
                                                          2. igor 22 марта 2016, 23:05 # 0
                                                            Здравствуйте!
                                                            При добавлении скрипта взятого из второго ответа за 17 декабря вылезает проблема!
                                                            — при переключении с одного пункта меню на другой проскакивает горизонтальная прокрутка, прямо на месте меню. При третьем переключении этот эффект пропадает, до обновления страницы.
                                                            Скрипт вынесен в отдельный файл.
                                                            //при нажатии на ссылку
                                                            $(".navbar-collapse a").click(function() {
                                                              //если она не имеет класс dropdown-toggle
                                                              if (!$(this).hasClass("dropdown-toggle")) {
                                                                //то закрыть меню
                                                                $(".navbar-collapse").collapse('hide');
                                                              }
                                                            });
                                                            Cкрин прилагаю:
                                                            Скриншот
                                                            1. Александр Мальцев 23 марта 2016, 11:48 # +1
                                                              Здравствуйте!
                                                              Покажите Вашу ситуацию на jsfiddle или на чём-то подобном.
                                                              Так как у меня ничего такого не возникает.
                                                              1. igor 23 марта 2016, 15:06 # 0
                                                                А можно я вам на почту сброшу шаблон с которым я работаю?
                                                            2. igor 23 марта 2016, 16:40 # 0
                                                              Огромное спасибо!
                                                              Ваш сайт лучший!
                                                              И помощь реальная!
                                                              1. александр морозов 19 апреля 2016, 15:35 # 0
                                                                Добрый день, действительно хорошая статья, спасибо.
                                                                Никак не могу решить проблему, и у Вас тоже ничего не написано.
                                                                Если меню прижать к низу, то после того как оно «схлопывается», при наведении на гамбургер оно пытается раскрыться вниз, а там конец страницы и ничего не происходит. Можно как-то сделать, чтобы оно раскрывалось вверх?
                                                                1. Александр Мальцев 20 апреля 2016, 13:39 # 0
                                                                  Здравствуйте, меню navbar, как Вы описали выше, так и работает. Дополнительно ничего настраивать не требуется.
                                                                  <nav class="navbar navbar-default navbar-fixed-bottom">
                                                                  ...
                                                                  </nav>
                                                                  
                                                                  Если у Вас что-то не работает, то проверьте, есть ли ошибки (в Chrome — клавиша F12, вкладка Console).
                                                                2. Тимур 20 апреля 2016, 22:44 # 0
                                                                  Здравствуйте! Подскажите пожалуйста, как сделать что бы при переходе на пункт выпадающего меню, основной пункт меню, под которым оно находиться становилось нужного цвета? И ещё похожий вопрос, когда переходишь из пункта выпадающего меню в пункт субменю, что бы пункт выпадающего меню оставался подсвеченным. Все как в примере _http://visavik.com. Bootstrap 3
                                                                  1. Александр Мальцев 22 апреля 2016, 17:24 # 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. Тимур 23 апреля 2016, 11:50 # 0
                                                                      в 1 пункте не получилось что то, перехожу в пункт подменю, ничего не проиходит
                                                                      1. Тимур 23 апреля 2016, 22:28 # 0
                                                                        весь день ищу, ничего не получается. Почему когда нажимаю на пункт dropdown меню, основной пункт не меняет цвет:(
                                                                    2. Тимур 20 апреля 2016, 22:46 # 0
                                                                      И ещё вопрос, как в выпадающем меню сделать разделительные полоски в том же примере
                                                                      1. Александр Мальцев 22 апреля 2016, 17:30 # 0
                                                                        Разделительные полоски можно добавить так:
                                                                        .dropdown-menu li {
                                                                            border-bottom: 1px solid #e5e5e5;;
                                                                        }
                                                                        
                                                                      2. Тимур 20 апреля 2016, 23:03 # 0
                                                                        Извиняюсь за назойливость, но возник тут же ещё вопрос. Как сделать такое меню, как в примере выше, в маленьком окне? У меня появляется скролл и выпадающее меню ложится под контент
                                                                        1. Александр Мальцев 22 апреля 2016, 17:38 # 0
                                                                          Перекрытие элементов определяется свойством z-index. Следовательно, другой контент имеет более высокое значение, чем оно установлено у выпадающего меню. Значение z-index по умолчанию у dropdown-menu составляет 1000.
                                                                          1. Тимур 23 апреля 2016, 11:37 # 0
                                                                            Спасибо Вам большое! Все получилось)
                                                                        2. Марина 21 апреля 2016, 17:35 # 0
                                                                          Спасибо за ваши уроки! Это лучшее, что есть в рунете по Бутстрапу.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


                                                                            Буду рад за совет где поискать и что почитать про настройку адаптации.
                                                                            1. Александр Мальцев 25 апреля 2016, 15:51 # 0
                                                                              Необходимо подобрать точку сворачивания navbar. Т.е. ширину экрана при котором меню будет сворачиваться в мобильный вид.
                                                                              Наиболее просто это сделать на странице _http://getbootstrap.com/customize/#grid-system. На ней необходимо изменить значение переменной @grid-float-breakpoint на необходимое значение (например, 1000px). Данная установка будет означать, что меню navbar будет иметь мобильный вид уже с 999px. После этого необходимо скомпилировать и скачать сборку.
                                                                              Можете также изменить и размер шрифта:
                                                                              .navbar-collapse {
                                                                                font-size: 12px;
                                                                              }
                                                                              
                                                                              Для выравнивания элементов по правому краю используйте класс navbar-right.
                                                                              1. OdIUm 25 апреля 2016, 19:48 # 0
                                                                                Спасибо большое! Попробую.
                                                                                1. Ильнур 12 августа 2016, 18:13 # 0
                                                                                  А где можно поправить этот параметр в уже загруженном бутстрапе? поиск в файле bootstrap.min.css по имени grid-float-breakpoint ничего не дает(
                                                                                  1. Александр Мальцев 14 августа 2016, 11:31 # 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. Михаил 26 апреля 2016, 22:56 # 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. Александр Мальцев 27 апреля 2016, 11:27 # 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. Михаил 27 апреля 2016, 13:26 # 0
                                                                                    Извините ещё раз, я наверное не правильно объяснил. У меня при прокрутке блок (ABOUT) наезжает на меню и оно пропадает, а когда этот блок прокручивается меню появляется и с последующими блоками уже нормально. Предполагаю что стили не правильно установил. Может взгляните?
                                                                                    _http://plnkr.co/edit/VU2bROs0OVpLFzryL056?p=preview
                                                                                    1. Михаил 27 апреля 2016, 20:10 # 0
                                                                                      Спасибо, разобрался. Но сейчас появилась под меню полоса примерно в 10px. Ну никак не могу с ней справиться. Может подскажите как от неё избавиться? Спасибо
                                                                                      Изображение
                                                                                      1. Александр Мальцев 29 апреля 2016, 11:26 # 0
                                                                                        Скорее всего, это отступ. Измените его на значение 0px.
                                                                                        1. Михаил 02 мая 2016, 07:22 # 0
                                                                                          Как всё просто :) Спасибо
                                                                                2. OdIUm 28 апреля 2016, 20:40 # 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. Александр Мальцев 29 апреля 2016, 11:21 # 0
                                                                                    Это отступ navbar.
                                                                                    Если он Вам не нужен, то сделайте так:
                                                                                    /* CSS */
                                                                                    .navbar {
                                                                                      margin-bottom: 0px;
                                                                                    }
                                                                                    
                                                                                  2. Burboss 04 мая 2016, 11:11 # 0
                                                                                    Александр, здравствуйте.
                                                                                    Благодарю Вас за отличные уроки. Это лучшее, что есть в инете.
                                                                                    Вопрос: между брендом и собственно меню надо вставить картинку с телефонным номером.
                                                                                    Вставляю, так она, зараза, бегает то вверх, то вниз относительно середины блока.
                                                                                    Помогите разобраться, пожалуйста
                                                                                    1. Александр Мальцев 04 мая 2016, 13:50 # 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 04 мая 2016, 13:57 # 0
                                                                                        Благодарю Вас, Александр.
                                                                                        1. Burboss 04 мая 2016, 14:10 # 0
                                                                                          Вставил текст «номер телефона», так он залип сверху блока и никак оттуда…
                                                                                      2. Burboss 04 мая 2016, 14:13 # 0
                                                                                        Отбой. Спасибо
                                                                                        1. Артур 13 мая 2016, 20:48 # 0
                                                                                          Здравствуйте! Подскажите пожалуйста. Имеется подменю 2 уровня. При его просмотре, родительское меню мне удалось сделать подсвеченным.
                                                                                          .navbar-nav > li:hover > a {
                                                                                          color: #fff;
                                                                                          background-color: #0165C2;
                                                                                          }
                                                                                          Вопрос? А как мне сделать, так что бы при клике на пункт подменю, его родитель оставался подсвеченным. Я как понимаю, это чрез active, но самостоятельно разобраться не получается
                                                                                          1. Артур 13 мая 2016, 20:57 # 0
                                                                                            Как сделать, чтобы при активном дочернем меню, родительское было активно (подсвечивалось)
                                                                                            1. Александр Мальцев 14 мая 2016, 13:01 # 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. Артур 14 мая 2016, 17:04 # 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. Александр Мальцев 16 мая 2016, 12:20 # 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. Никита 18 мая 2016, 11:31 # 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. Никита 18 мая 2016, 12:46 # 0
                                                                                                  Первый вопрос снимается, там же return не в конце, ужасная оплошность.
                                                                                                  1. Никита 18 мая 2016, 12:59 # 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. Руслан 18 мая 2016, 14:10 # 0
                                                                                                  Здравствуйте Александр. Помогите пожалуйста разобраться с иконками в меню. Есть пункт с выпадающим списком, ему задаю иконку, но она наследуется всеми вложенными подпунктами. Как сделать иконку только для текущего пункта?
                                                                                                  .menu-item-14 a:before {
                                                                                                      font-family: FontAwesome;
                                                                                                      content: "\f0ac";
                                                                                                      padding-right: 7px;
                                                                                                      font-weight: normal;
                                                                                                  }
                                                                                                  1. Александр Мальцев 19 мая 2016, 13:38 # 0
                                                                                                    Измени, чтобы использовалась только на детей:
                                                                                                    .menu-item-14>a:before {
                                                                                                        font-family: FontAwesome;
                                                                                                        content: "\f0ac";
                                                                                                        padding-right: 7px;
                                                                                                        font-weight: normal;
                                                                                                    }
                                                                                                    
                                                                                                    1. Руслан 19 мая 2016, 15:10 # 0
                                                                                                      Спасибо! Все получилось :)
                                                                                                  2. Руслан 18 мая 2016, 14:14 # 0
                                                                                                    И вопрос туда же. Хочу сделать иконку большего размера, но меню при этом растягивается по высоте, остальные пункты меню смещаются относительно пункта с иконкой. Как это можно исправить, не увеличивая текущей высоты navbar, и выравнять остальные пункты?
                                                                                                    1. Александр Мальцев 19 мая 2016, 13:34 # 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. сергей 27 мая 2016, 21:21 # 0
                                                                                                      привет! а есть отдельный .css для этого меню? выложи плиз))
                                                                                                      1. Александр Мальцев 28 мая 2016, 13:05 # 0
                                                                                                        Вот сборка состоящая из одного компонента navbar:
                                                                                                        getbootstrap.com/customize/?id=e4ae3166f551d396cc928acf43d4d66a

                                                                                                        В конце страницы нажми на кнопку «Compile and Download». В архиве будут 2 файла (bootstrap.css и bootstrap.js). Их необходимо подключить к странице.
                                                                                                      2. Дмитрий 13 июня 2016, 05:23 # 0
                                                                                                        Здравствуйте! У меня в мобильной версии когда кликаю на пункт меню, не раскрывается подменю. А если на обычном разрешении, то все работает нормально. Подскажите в чем проблема?
                                                                                                        1. Александр Мальцев 14 июня 2016, 13:04 # 0
                                                                                                          Здравствуйте! За раскрытие пункта подменю отвечает плагин Bootstrap Dropdowns и соответствующие стили. Если Вы используете полную версию Bootstrap, и данные плагины и стили включены в файлы bootstrap.js и boostrap.css, то необходимо проверить не оказывает ли на работу влияние сторонние стили или скрипты. Попробуйте отключить всё кроме Bootstrap и библиотеки jQuery, и проверить.
                                                                                                        2. JOYsticK 30 июня 2016, 18:49 # 0
                                                                                                          Впервые пробую работать с bootstrap, скачал готовый шаблон, в котором идет переход по якорям
                                                                                                          <li><a href="#top">Главная</a></li>
                                                                                                          и тд. Но если поставить в ссылку
                                                                                                          <li><a href="index.html#top">Главная</a></li>
                                                                                                          , то при клике мышкой перехода не будет, подскажите как разрешить переход?
                                                                                                          1. Александр Мальцев 02 июля 2016, 10:03 # 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 05 июля 2016, 11:44 # 0
                                                                                                              такой метод пробовал, элемент base в обще не получилось применить.
                                                                                                              а вот
                                                                                                              <a href="http://мойсайт/index.html">Главная</a>
                                                                                                              так же как и
                                                                                                              <a href="/index.html">Главная</a>
                                                                                                              при наведении мышкой показывает ссылку, если нажать правой мышкой и в контекстном меню выбрать открыть в новом окне то откроется главная, а если нажать левый мышкой то ничего не происходит, левой мышкой работают только якоря.
                                                                                                              1. JOYsticK 05 июля 2016, 13:21 # 0
                                                                                                                вот сам шаблон, если конечно есть время с этим помочь разобраться.
                                                                                                                1. JOYsticK 05 июля 2016, 17:36 # 0
                                                                                                                  спасибо за ответы, разобрался, дело было Single Page Nav Plugin JS.
                                                                                                              2. Фарход 01 августа 2016, 12:55 # 0
                                                                                                                Ребята помогите с проблемой, когда меню схлопывается(для маленьких экранов) и появляется кнопка для раскрытия меню, у меня на сайте есть слайдер и вот когда меню открывается оно проходит под слайдером, вместо того что бы его сдвигать вниз?
                                                                                                                1. Александр Мальцев 05 августа 2016, 11:57 # 0
                                                                                                                  Настройка положения элементов по оси Z осуществляется с помощью CSS свойства z-index.
                                                                                                                  Вам необходимо сделать что-то подобное этому:
                                                                                                                  .navbar .nav > li {
                                                                                                                    z-index: 10001;
                                                                                                                  }
                                                                                                                  
                                                                                                                2. Вячеслав 17 сентября 2016, 21:51 # 0
                                                                                                                  Здравствуйте, Александр, подскажите пжлста с вопросом:
                                                                                                                  — bootstrap 3
                                                                                                                  — в одной строке «навигационное меню» по сайту и меню «входа/регистрации»
                                                                                                                  Вопрос — есть ли возможность схлопывания меню в кнопку (с выпадающим вертикальным меню) при разных разрешениях экрана. Т.е. чтобы меню входа/регистрации схлопывалось при разрешении 992px, а основное меню схлопывалось в кнопку при разрешении 768px?
                                                                                                                  Заранее спасибо за ответ
                                                                                                                  1. Александр Мальцев 18 сентября 2016, 10:12 # 0
                                                                                                                    С помощью медиа запросов. Основное меню и так будет схлопываться при разрешении 768px. А вот для регистрации необходимо будет создать два состояния меню. Одно будет видно при разрешения больше 992px, а другое когда данная ширина меньше.
                                                                                                                    1. Вячеслав 18 сентября 2016, 10:29 # 0
                                                                                                                      Это получается для меню регистрации необходимо отдельные классы создавать, копировать CSS отвечающий за схлопывание при 768px, переписывать в этом CSS классы для регистрации и выставлять значение схлопывания 992px?
                                                                                                                      1. Александр Мальцев 18 сентября 2016, 11:37 # 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>
                                                                                                                        
                                                                                                                  2. Валерий 07 декабря 2016, 09:47 # 0
                                                                                                                    Александр, добрый день! Подскажите, пжлста, как к пункту подменю добавить пункт под-подменю. Пробовал по такой же схеме, как для меню-подменю, так не раскрывается и схлопывается.
                                                                                                                    1. Александр Мальцев 08 декабря 2016, 12:52 # 0
                                                                                                                      Код для такого подменю можно взять из Bootstrap 2.
                                                                                                                      Элемент li необходимо расположить в ul с классом dropdown-menu:
                                                                                                                      <li class="dropdown-submenu">
                                                                                                                        <a tabindex="-1" href="#">Наведи на меня...</a>
                                                                                                                        <ul class="dropdown-menu">
                                                                                                                          <li><a href="#">Пункт под-подменю 1...</a></li>
                                                                                                                          <li><a href="#">Пункт под-подменю 2...</a></li>
                                                                                                                          <li><a href="#">Пункт под-подменю 3...</a></li>
                                                                                                                        </ul>
                                                                                                                      </li>
                                                                                                                      
                                                                                                                      В CSS добавить следующие стили:
                                                                                                                      .dropdown-submenu {
                                                                                                                        position: relative;
                                                                                                                      }
                                                                                                                      .dropdown-submenu>.dropdown-menu {
                                                                                                                        top: 0;
                                                                                                                        left: 100%;
                                                                                                                        margin-top: -6px;
                                                                                                                        margin-left: -1px;
                                                                                                                        -webkit-border-radius: 0 6px 6px 6px;
                                                                                                                        -moz-border-radius: 0 6px 6px;
                                                                                                                        border-radius: 0 6px 6px 6px;
                                                                                                                      }
                                                                                                                      .dropdown-submenu:hover>.dropdown-menu {
                                                                                                                        display: block;
                                                                                                                      }
                                                                                                                      .dropdown-submenu>a:after {
                                                                                                                        display: block;
                                                                                                                        content: " ";
                                                                                                                        float: right;
                                                                                                                        width: 0;
                                                                                                                        height: 0;
                                                                                                                        border-color: transparent;
                                                                                                                        border-style: solid;
                                                                                                                        border-width: 5px 0 5px 5px;
                                                                                                                        border-left-color: #ccc;
                                                                                                                        margin-top: 5px;
                                                                                                                        margin-right: -10px;
                                                                                                                      }
                                                                                                                      .dropdown-submenu:hover>a:after {
                                                                                                                        border-left-color: #fff;
                                                                                                                      }
                                                                                                                      .dropdown-submenu.pull-left {
                                                                                                                        float: none;
                                                                                                                      }
                                                                                                                      .dropdown-submenu.pull-left>.dropdown-menu {
                                                                                                                        left: -100%;
                                                                                                                        margin-left: 10px;
                                                                                                                        -webkit-border-radius: 6px 0 6px 6px;
                                                                                                                        -moz-border-radius: 6px 0 6px 6px;
                                                                                                                        border-radius: 6px 0 6px 6px;
                                                                                                                      }
                                                                                                                      
                                                                                                                      1. Валерий 12 декабря 2016, 05:31 # 0
                                                                                                                        Александр, огромное спасибо: и за оперативный ответ, и за реальную помощь. На вашем сайте недавно, но уже успел оценить его.
                                                                                                                    2. Виталий 29 декабря 2016, 22:05 # 0
                                                                                                                      Александр, добрый день. Можете помочь подключить navbar(версия bootstrap 4) к instantcms 2.6.1? Как-то там непонятно меню устроено…
                                                                                                                      Думаю это многим полезно будет.
                                                                                                                      С меня пиво на любой кошелек.
                                                                                                                      Спасибо.
                                                                                                                      1. Александр Мальцев 06 января 2017, 07:27 # +1
                                                                                                                        Здравствуйте, с instantcms не знаком. Извините, не смогу вам помочь.
                                                                                                                      2. Arhan 02 января 2017, 03:29 # 0
                                                                                                                        Помогите, пожалуйста, с навигацией на сайте.
                                                                                                                        1. Сделал чанк Navbar
                                                                                                                        2. Закинул в него pdoMenu со следующим кодом:
                                                                                                                        <!-- Меню -->
                                                                                                                        <nav role="navigation" class="navbar navbar-default navbar-static-top">
                                                                                                                        <div class="container">
                                                                                                                            <div class="navbar-header">
                                                                                                                                [[pdoMenu? 
                                                                                                                                    &level=`2` 
                                                                                                                                    &parents=`0`
                                                                                                                                    &outerClass=`nav navbar-nav navbar-right`
                                                                                                                                    &tplOuter=`@INLINE <ul [[+classes]] id="menu">[[+wrapper]]</ul>` 
                                                                                                                                    &tplInner=`@INLINE <ul class="dropdown-menu">[[+wrapper]]</ul>`
                                                                                                                                    &tplParentRow=`@INLINE 
                                                                                                                                    <li [[+classes]]>
                                                                                                                                        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="[[+link]]" [[+attributes]]>
                                                                                                                                            [[+menutitle]]<span class="caret"></span>
                                                                                                                                        </a>
                                                                                                                                        [[+wrapper]]
                                                                                                                                    </li>`
                                                                                                                                ]]
                                                                                                                                </div>
                                                                                                                            </div>
                                                                                                                        </nav>
                                                                                                                        3. Закинул чанк в шаблон
                                                                                                                        , но не все меню работает правильно т.е. меню без категорий работает нормально, но при нажатии на категорию или вложеное в ней меню (со второго клика) сайт начинает падать, отображаться не правильно: картинки не отображаются, не придерживается стилей как-будто их нет вовсе, любой клик на пункт меню перекидывает на главную страницу, но нажав на лого или пункт главная приводит сайт в порядок.
                                                                                                                        Может кто сталкивался или знает где ошибка?
                                                                                                                        1. Александр Мальцев 02 января 2017, 20:26 # 0
                                                                                                                          Проверьте, правильно ли у вас подключён на главной и других страницах сайта фреймворк Bootstrap. А также обследуйте, каким образом у вас осуществляется построение меню на всех страницах сайта, а не только на главной. Ну и проверьте базовые составляющие страницы (HTML, CSS, JavaScript).
                                                                                                                          1. Arhan 03 января 2017, 02:59 # 0
                                                                                                                            Вот так я подключаю css (чанк Head):
                                                                                                                            <head>
                                                                                                                                <meta charset="utf-8">
                                                                                                                                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                                                                                                                                <meta name="viewport" content="width=device-width, initial-scale=1">
                                                                                                                                <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
                                                                                                                                <title>[[*pagetitle]]</title>
                                                                                                                            
                                                                                                                                <!-- Bootstrap -->    
                                                                                                                            	<!--<link href="/assets/template/css/bootstrap.css" rel="stylesheet">-->
                                                                                                                                <link href="/assets/template/css/bootstrap.min.css" rel="stylesheet">
                                                                                                                                <!--<link href="/assets/template/css/bootstrap-theme.css" rel="stylesheet">-->
                                                                                                                                <link href="/assets/template/css/bootstrap-theme.min.css" rel="stylesheet">
                                                                                                                            
                                                                                                                                <link href="/assets/template/css/style.css" rel="stylesheet">
                                                                                                                                
                                                                                                                                <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
                                                                                                                                <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
                                                                                                                                <!--[if lt IE 9]>
                                                                                                                                  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
                                                                                                                                  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
                                                                                                                                <![endif]-->
                                                                                                                              </head>
                                                                                                                            так я подключаю js-скрипты (чанк Footer-script):
                                                                                                                            <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
                                                                                                                                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
                                                                                                                            
                                                                                                                            	<!--<script src="../assets/template/js/bootstrap.js"></script>-->
                                                                                                                                <script src="../assets/template/js/bootstrap.min.js"></script>
                                                                                                                                <script src="../assets/template/js/npm.js"></script>
                                                                                                                                <script src="../assets/template/js/jquery-3.1.1.min.js"></script>
                                                                                                                                
                                                                                                                                <!-- Скрипт для чанка FeelBack (обратная связь) -->
                                                                                                                                <!--<script src="assets/template/js/FeelBackMessage.js"></script>-->
                                                                                                                            Меню строю так (чанк Navbar):
                                                                                                                            <!-- Меню -->
                                                                                                                            <nav role="navigation" class="navbar navbar-default navbar-static-top">
                                                                                                                            <div class="container">
                                                                                                                                <div class="navbar-header navbar-right">
                                                                                                                                    [[pdoMenu? 
                                                                                                                                        &level=`2` 
                                                                                                                                        &parents=`0`
                                                                                                                                        &outerClass=`nav navbar-nav`
                                                                                                                                        &tplOuter=`@INLINE <ul [[+classes]] id="menu">[[+wrapper]]</ul>` 
                                                                                                                                        &tplInner=`@INLINE <ul class="dropdown-menu">[[+wrapper]]</ul>`
                                                                                                                                        &tplParentRow=`@INLINE 
                                                                                                                                            <li [[+classes]]>
                                                                                                                                                <a class="dropdown-toggle" data-toggle="dropdown" href="[[+link]]" [[+attributes]]>
                                                                                                                                                    [[+menutitle]]<span class="caret"></span>
                                                                                                                                                </a>
                                                                                                                                                [[+wrapper]]
                                                                                                                                            </li>`
                                                                                                                                    ]]
                                                                                                                                    </div>
                                                                                                                                </div>
                                                                                                                            </nav>
                                                                                                                            Шаблон Главной страницы:
                                                                                                                            <!DOCTYPE html>
                                                                                                                            <html lang="en">
                                                                                                                                
                                                                                                                                [[$Head?]]
                                                                                                                                
                                                                                                                              <body>
                                                                                                                                  
                                                                                                                                <div class="jumbotron">
                                                                                                                                <!-- Шапка (Header) -->
                                                                                                                                [[$Header?]]
                                                                                                                                
                                                                                                                                <!-- Меню -->
                                                                                                                                [[$Navbar?]]
                                                                                                                                
                                                                                                                                <!-- Слайдер -->
                                                                                                                                [[$Slider?]]
                                                                                                                            
                                                                                                                                </div>
                                                                                                                            
                                                                                                                                <!-- Thumbnails -->
                                                                                                                                [[$Thumbnails?]]
                                                                                                                            
                                                                                                                                
                                                                                                                                
                                                                                                                                
                                                                                                                                <!-- Наполнение (Содержимое) -->
                                                                                                                                <div class="container">
                                                                                                                                [[*content]]
                                                                                                                                </div>
                                                                                                                                
                                                                                                                                <!-- Подвал (Footer) -->
                                                                                                                                [[$Footer?]]
                                                                                                                                
                                                                                                                                <!-- Скрипты -->
                                                                                                                                [[$Footer-script?]]
                                                                                                                              </body>
                                                                                                                            </html>
                                                                                                                            Основной шаблон (для других страниц):
                                                                                                                            <!DOCTYPE html>
                                                                                                                            <html lang="en">
                                                                                                                                [[$Head?]]
                                                                                                                              <body>
                                                                                                                                <div class="jumbotron">
                                                                                                                                    <!-- Шапка (Header) -->
                                                                                                                                    [[$Header?]]
                                                                                                                                    
                                                                                                                                    <!-- Меню -->
                                                                                                                                    [[$Navbar?]]
                                                                                                                                </div>
                                                                                                                                
                                                                                                                                <!-- Крошки -->
                                                                                                                                    [[$Crumbs?]]
                                                                                                                                    
                                                                                                                                <!-- Наполнение (Содержимое) -->
                                                                                                                                <div class="container">
                                                                                                                                    <h3>[[*longtitle]]</h3>
                                                                                                                                    [[*content]]
                                                                                                                                </div>
                                                                                                                                
                                                                                                                                <!-- Подвал (Footer) -->
                                                                                                                                [[$Footer?]]
                                                                                                                                
                                                                                                                                <!-- Скрипты -->
                                                                                                                                [[$Footer-script?]]
                                                                                                                              </body>
                                                                                                                            </html>
                                                                                                                            Было начал грешить на бесплатный хостинг — beget.
                                                                                                                            Подскажите, пожалуйста, где ошибка? И как Вы код, на форуме, делаете цветным?
                                                                                                                            Спасибо.
                                                                                                                            1. Александр Мальцев 06 января 2017, 07:20 # 0
                                                                                                                              Здравствуйте. Что-то не заметил у вас тега base в разделе head?
                                                                                                                              <base href="[[++site_url]]">
                                                                                                                              
                                                                                                                              После указания этого тега пути к файлам будут рассчитываться уже относительно корня сайта. Указания путей к файлам осуществляйте следующим образом:
                                                                                                                              <link href="[[++assets_url]]template/css/bootstrap.min.css" rel="stylesheet">
                                                                                                                              <script src="[[++assets_url]]template/js/bootstrap.min.js"></script>
                                                                                                                              
                                                                                                                              1. Arhan 06 января 2017, 23:25 # 0
                                                                                                                                Спасибо Вам большое. Вы очень помогли. Сайт зафункционировал правильно. Спасибо.
                                                                                                                              2. Александр Мальцев 06 января 2017, 13:59 # 0
                                                                                                                                Оформление кода (раскраску) можно выполнить с помощью скрипта prettyprint. Чтобы он автоматически выставлялся в комментариях необходимо воспользоваться настройками Jevix. Для этого необходимо перейти в раздел админки «Наборы параметров», выбрать соответствующий набор и отредактировать в нём параметр cfgSetAutoReplace. Например, так:
                                                                                                                                [["±","©","©","®","©","©","®","<code","code>"],["±","©","©","®","©","©","®","<pre class=\"prettyprint\"","pre>"]]
                                                                                                                                1. Arhan 06 января 2017, 23:54 # 0
                                                                                                                                  Это Вы про modx или на Вашем сайте?
                                                                                                                                  1. Александр Мальцев 07 января 2017, 09:59 # 0
                                                                                                                                    Это про MODX и дополнение Tickets, которое использует Jevix.
                                                                                                                                    1. Александр Мальцев 07 января 2017, 10:56 # 0
                                                                                                                                      Если на сайте, то код необходимо обернуть в конструкцию:
                                                                                                                                      <pre class="prettyprint">
                                                                                                                                      </pre>
                                                                                                                                      
                                                                                                                                      На сайте некоторое время назад, любой фрагмент кода получал автоматическую расцветку. Т.е. код, помещённый в элемент code, превращался в вышеприведённую конструкцию. Это конечно хорошо, но если кусков кода на странице много, то это увеличивает время необходимое на отображение этой страницы в браузере. Т.е. открытие страницы сильно нагружает процессор пользователя, т.к. ему приходится отформатировать различными цветами большие куски кода. Поэтому в последнее время на сайте этого не происходит. Но если вы хотите это сделать, то оберните код не в элемент code, а в pre с классом prettyprint.
                                                                                                                                2. Arhan 03 января 2017, 16:58 # 0
                                                                                                                                  Могу ссылку на сайт открыть, а то появилось большое желание перейти на другой движек (сроки поджимают)
                                                                                                                                  1. Александр Мальцев 06 января 2017, 07:25 # 0
                                                                                                                                    Перед тем как что-то делать на движке MODX Revolution, надо с ним хотя бы немножко разобраться. Если вышеприведённый комментарий не сможете выполнить, то пришлите коды на сайт, помогу исправить вашу проблему…
                                                                                                                              3. Alex-RNS 06 января 2017, 21:52 # 0
                                                                                                                                Шеф, помоги! Есть выпадающий список, который при помощи
                                                                                                                                @media (min-width: 767px){
                                                                                                                                .dropdown:hover  .dropdown-menu {
                                                                                                                                		margin: 0;
                                                                                                                                		display: block;
                                                                                                                                }
                                                                                                                                }
                                                                                                                                сделал выпадающим при наведении, но само выпадающее меню неактивно. Нужно кликнуть по родителю, чтоб были активны дети.
                                                                                                                                1. Александр Мальцев 07 января 2017, 05:53 # 0
                                                                                                                                  Попробуй вместо CSS-стилей использовать JavaScript-код:
                                                                                                                                  $(function() {
                                                                                                                                    $('ul.nav li.dropdown').hover(
                                                                                                                                      function(){ 
                                                                                                                                  	  if (window.matchMedia('(min-width:768px)').matches) {		
                                                                                                                                          $(this).addClass('open');
                                                                                                                                  	  }
                                                                                                                                  	},
                                                                                                                                      function(){ 
                                                                                                                                        if (window.matchMedia('(min-width:768px)').matches) {
                                                                                                                                          $(this).removeClass('open');
                                                                                                                                        }
                                                                                                                                      }
                                                                                                                                    );	
                                                                                                                                  });
                                                                                                                                  
                                                                                                                                2. Тимофей 23 января 2017, 11:06 # 0
                                                                                                                                  Добрый день, как сделать, что бы меню открывалось не вниз, а на верх?
                                                                                                                                  1. Александр Мальцев 26 января 2017, 13:57 # 0
                                                                                                                                    Воспользуйся этим комментарием: itchief.ru/lessons/bootstrap-3/119-bootstrap-3-customize-the-navbar#comment-3457
                                                                                                                                  2. Влад 27 января 2017, 11:59 # 0
                                                                                                                                    Александр, доброго времени суток, столкнулся с проблемой показа подменю справа от родительского вертикального меню, подменю накладывается на основное меню, а ссылки которые есть в подменю, выходят вправо как и задумывалось, сутки уже рою инет и вот пришлось к вам обратится за помощью
                                                                                                                                    вот код меню:
                                                                                                                                    <nav id="site-navigation" class="main-navigation" role="navigation">
                                                                                                                                    			    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><i class="fa fa-bars" aria-hidden="true"></i></button>
                                                                                                                                    			    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
                                                                                                                                    		        </nav><!-- #site-navigation -->
                                                                                                                                    вот стиль этого меню:
                                                                                                                                    .main-navigation {
                                                                                                                                    	font-family: "MyriadProRegular";
                                                                                                                                    	font-size: 20px;
                                                                                                                                    }
                                                                                                                                    
                                                                                                                                    .main-navigation {
                                                                                                                                    	clear: both;
                                                                                                                                    	display: block;
                                                                                                                                    	float: left;
                                                                                                                                    	width: 100%;
                                                                                                                                    }
                                                                                                                                    
                                                                                                                                    .main-navigation ul {
                                                                                                                                    	display: none;
                                                                                                                                    	list-style: none;
                                                                                                                                    	margin: 0;
                                                                                                                                    	padding-left: 0;
                                                                                                                                    }
                                                                                                                                    
                                                                                                                                    .main-navigation li {
                                                                                                                                        display: inline-block;
                                                                                                                                        position: relative;
                                                                                                                                        text-transform: inherit;
                                                                                                                                        width: 100%;	
                                                                                                                                    }
                                                                                                                                    
                                                                                                                                    .main-navigation li img {
                                                                                                                                    	padding-left: 10px;
                                                                                                                                    }
                                                                                                                                    
                                                                                                                                    .main-navigation li a {
                                                                                                                                    	box-sizing: inherit;
                                                                                                                                    	padding: 5px 0;
                                                                                                                                    }
                                                                                                                                    
                                                                                                                                    .main-navigation li a {
                                                                                                                                    	display: block; /* Изменение отображения на блочное для того чтобы иметь возможность задать внутренние отступы. */
                                                                                                                                    	background: #150000; /* Цвет блоков меню. */
                                                                                                                                    	color: #f9e491; /* Цвет текста в блоках меню. */
                                                                                                                                    	text-decoration: none; /* Устранение подчёркивания ссылок. */
                                                                                                                                    	position: relative; /* Это необходимо при использовании Internet Explorer 6 для того, чтобы ссылка по всей своей площади была «кликабельной». */
                                                                                                                                    }
                                                                                                                                    
                                                                                                                                    .main-navigation li a:hover {
                                                                                                                                       background: #f9e491; /* Цвет блока при наведении курсора. */
                                                                                                                                       color: #0b0a0a;  /* Цвет текста при наведении курсора. */
                                                                                                                                    }
                                                                                                                                    
                                                                                                                                    .main-navigation li:hover > a, .main-navigation li.focus > a {
                                                                                                                                        background: #f9e491;
                                                                                                                                        color: #0b0a0a;
                                                                                                                                    }
                                                                                                                                    
                                                                                                                                    .main-navigation a:hover {
                                                                                                                                    	-webkit-transition: all 0.9s ease;
                                                                                                                                    	-o-transition: all 0.9s ease;
                                                                                                                                    	transition: all 0.9s ease;
                                                                                                                                    }
                                                                                                                                    
                                                                                                                                    
                                                                                                                                    
                                                                                                                                    .main-navigation ul ul {
                                                                                                                                    	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
                                                                                                                                    	float: left;
                                                                                                                                    	position: absolute;
                                                                                                                                    	top: 1.5em;
                                                                                                                                    	left: -999em;
                                                                                                                                    	z-index: 99999;
                                                                                                                                    	
                                                                                                                                    }
                                                                                                                                    
                                                                                                                                    .main-navigation ul li ul{
                                                                                                                                        position:absolute;
                                                                                                                                        top:0px;
                                                                                                                                        left:100%;
                                                                                                                                        display:none;
                                                                                                                                        width:auto;
                                                                                                                                    }
                                                                                                                                    
                                                                                                                                    .main-navigation ul li:hover ul{
                                                                                                                                    	display:block;
                                                                                                                                    	position: absolute;
                                                                                                                                    }
                                                                                                                                    
                                                                                                                                    .main-navigation ul li ul li a{
                                                                                                                                        white-space:nowrap;
                                                                                                                                        text-transform:none;
                                                                                                                                        padding:5px 20px;
                                                                                                                                    }
                                                                                                                                    
                                                                                                                                    .main-navigation ul ul ul {
                                                                                                                                    	left: -999em;
                                                                                                                                    	top: 0;
                                                                                                                                    }
                                                                                                                                    
                                                                                                                                    .main-navigation ul ul a {
                                                                                                                                    	width: 100%;
                                                                                                                                    }
                                                                                                                                    
                                                                                                                                    .main-navigation li:hover > a,
                                                                                                                                    .main-navigation li.focus > a {
                                                                                                                                    }
                                                                                                                                    
                                                                                                                                    .main-navigation ul ul :hover > a,
                                                                                                                                    .main-navigation ul ul .focus > a {
                                                                                                                                    }
                                                                                                                                    
                                                                                                                                    .main-navigation ul ul a:hover,
                                                                                                                                    .main-navigation ul ul a.focus {
                                                                                                                                    }
                                                                                                                                    
                                                                                                                                    .main-navigation ul li:hover > ul,
                                                                                                                                    .main-navigation ul li.focus > ul {
                                                                                                                                    	left: auto;
                                                                                                                                    }
                                                                                                                                    
                                                                                                                                    .main-navigation ul ul li:hover > ul,
                                                                                                                                    .main-navigation ul ul li.focus > ul {
                                                                                                                                    	left: 100%;
                                                                                                                                    }
                                                                                                                                    
                                                                                                                                    .main-navigation .current_page_item > a,
                                                                                                                                    .main-navigation .current-menu-item > a,
                                                                                                                                    .main-navigation .current_page_ancestor > a,
                                                                                                                                    .main-navigation .current-menu-ancestor > a {
                                                                                                                                    }
                                                                                                                                    помогите пожалуйста!
                                                                                                                                    1. Александр Мальцев 03 февраля 2017, 16:49 # 0
                                                                                                                                      По стилям сложно судить, необходимо его показать на jsfiddle.
                                                                                                                                    2. Сергей 01 февраля 2017, 11:24 # 0
                                                                                                                                      Добрый день, Александр. Большое спасибо за ресурс! Подскажите пожалуйста: navbar-fixed-top, cms drupal, с body понятно, но под navbar уходит и админ панель, как ее оттуда вытащить? Заранее спасибо!
                                                                                                                                      1. Александр Мальцев 03 февраля 2017, 16:54 # 0
                                                                                                                                        Здравствуйте. Необходимо сдвинуть либо navbar, либо панель администратора.
                                                                                                                                        Например, можно сделать так:
                                                                                                                                        <style>
                                                                                                                                        body {
                                                                                                                                          padding-top: 170px;
                                                                                                                                        }
                                                                                                                                        .navbar-fixed-top {
                                                                                                                                          top: 100px;
                                                                                                                                        }
                                                                                                                                        </style>
                                                                                                                                        

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