Bootstrap 3 - Настройка компонента Navbar

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

Навигационное меню в Twitter Bootstrap 3 имеет следующие цветовые стили:

  • В светлых тонах (navbar-default);
  • В тёмных тонах (navbar-inverse).

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

Но прежде чем переходить к изменению цветовой палитры компонента navbar, необходимо знать какие стили Bootstrap CSS отвечают за установления цвета данного компонента. Приведём с пояснениями часть кода CSS платформы Twitter Bootstrap 3, который отвечает за установление цвета компонента "Navbar" (навигационное меню).

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Название сайта</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="#">Пункт 1 <span class="sr-only">(current)</span></a>
        </li>
        <li>
          <a href="#">Пункт 2</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 

aria-expanded="false">Пункт с подпунктами 1<span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Подпункт 1.1</a></li>
            <li><a href="#">Подпункт 1.2</a></li>
            <li><a href="#">Подпункт 1.3</a></li>
            <li class="divider"></li>
            <li><a href="#">Подпункт 1.4</a></li>
            <li class="divider"></li>
            <li><a href="#">Подпункт 1.5</a></li>
          </ul>
        </li>
      </ul>
      <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">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Пункт 3</a></li>
      </ul>
    </div>
  </div>
</nav>
/* цвет фона и рамки навигационного меню */
.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}
/* цвет текста, содержащий название сайта или бренда */
.navbar-default .navbar-brand {
    color: #777;
}
/* цвет текста (название сайта или бренда), при поднесении к нему курсора мышки или при его нахождении в фокусе */
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #5E5E5E;
}
/* Цвет пунктов навигационного меню */
.navbar-default .navbar-nav > li > a {
    color: #777;
}
/* Цвет пункта меню, при поднесении к нему курсора мышки или при его нахождении в фокусе */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
}
/* Цвет и фон активного пункта меню, а также поднесении к нему курсора мышки или при его нахождении в фокусе */
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #E7E7E7;
}
/* Цвет и фон открытого пункта меню, а также поднесении к нему курсора мышки или при его нахождении в фокусе */
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #D5D5D5;
}
/* Цвет стрелочки (треугольничка) у раскрывающихся пунктов меню */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #777;
    border-bottom-color: #777;
}
/* Цвет стрелочки (треугольничка) при поднесении к нему курсора мышки или при его нахождении в фокусе */
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
/* Цвет стрелочки (треугольничка), открывшегося пункта меню */
.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}
/* CSS стили для мобильных устройств */
/* Цвет рамки у кнопки, которая открывает меню */
.navbar-default .navbar-toggle {
    border-color: #DDD;
}
/* Цвет фона кнопки (которая открывает меню) при поднесении к ней курсора мышки или при нахождении её в фокусе */
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #DDD;
}
/* Цвет полосочек в кнопочке, которая открывает меню */
.navbar-default .navbar-toggle .icon-bar {
    background-color: #CCC;
}

@media (max-width: 767px) {
/* Цвет пунктов меню в раскрывающихся списках */
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }
/* Цвет и фон пункта меню в раскрывающихся списках, при поднесении к нему курсора мышки или при нахождении его в фокусе */
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #333;
        background-color: transparent;
    }
}

Навигационное меню Twitter Bootstrap по умолчанию

Для изменения цвета компонента "Navbar" мы будем использовать цветовую палитру, состоящую из 4 цветов.

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

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

Например: создадим навигационное меню зелёного цвета (текст: 1 цвет - #ecf0f1, 2 цвет - #d1ffed; фон: 1 цвет - #2ecc71, 2 цвет - #27ae60).

/* цвет фона и рамки навигационного меню */
.navbar-default {
    background-color: #2ecc71;
    border-color: #27ae60;
}
/* цвет текста, содержащий название сайта или бренда */
.navbar-default .navbar-brand {
    color: #ecf0f1;
}
/* цвет текста (название сайта или бренда), при поднесении к нему курсора мышки или при его нахождении в фокусе */
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #d1ffed;
}
/* Цвет пунктов навигационного меню */
.navbar-default .navbar-nav > li > a {
    color: #ecf0f1;
}
/* Цвет пункта меню, при поднесении к нему курсора мышки или при его нахождении в фокусе */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #d1ffed;
}
/* Цвет и фон активного пункта меню, а также поднесении к нему курсора мышки или при его нахождении в фокусе */
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: #d1ffed;
    background-color: #27ae60;
}
/* Цвет и фон открытого пункта меню, а также поднесении к нему курсора мышки или при его нахождении в фокусе */
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: #d1ffed;
    background-color: #27ae60;
}
/* Цвет стрелочки (треугольничка) у раскрывающихся пунктов меню */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #ecf0f1;
    border-bottom-color: #ecf0f1;
}
/* Цвет стрелочки (треугольничка) при поднесении к нему курсора мышки или при его нахождении в фокусе */
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #d1ffed;
    border-bottom-color: #d1ffed;
}
/* Цвет стрелочки (треугольничка), открывшегося пункта меню */
.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #d1ffed;
    border-bottom-color: #d1ffed;
}
/* CSS стили для мобильных устройств */
/* Цвет рамки у кнопки, которая открывает меню */
.navbar-default .navbar-toggle {
    border-color: #27ae60;
}
/* Цвет фона кнопки (которая открывает меню) при поднесении к ней курсора мышки или при нахождении её в фокусе */
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #27ae60;
}
/* Цвет полосочек в кнопочке, которая открывает меню */
.navbar-default .navbar-toggle .icon-bar {
    background-color: #ecf0f1;
}
/* Цвет пунктов меню в раскрывающихся списках */
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #ecf0f1;
  }
/* Цвет и фон пункта меню в раскрывающихся списках, при поднесении к нему курсора мышки или при нахождении его в фокусе */
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #d1ffed;
        background-color: #27ae60;
    }
}

Зелёное навигационное меню

Зелёный цвет Красный цвет Фиолетовый цвет Оранжевый цвет
Цвет пункта меню (текст) #ecf0f1 #ecf0f1 #ecf0f1 #ecf0f1
Цвет пункта меню (текст), при поднесении к нему курсора мышки, а также цвет активного пункта меню #d1ffed #ffbbbc #ecdbff #ffe6d1
Цвет фона пункта меню #2ecc71 #e74c3c #9b59b6 #e67e22
Цвет фона пункта меню, при поднесении к нему курсора мышки, а также цвет рамки меню #27ae60 #c0392b #8e44ad #d35400
Ссылка для скачивания CSS Скачать Скачать Скачать Скачать

Цветные навигационные меню

В зависимости от дизайна сайта Вы можете создать свою цветовую палитру для навигационного меню, состоящую из 4 цветов. Применить данные цвета можно посредством замены в файле CSS исходных цветов (например: красного navbar) на Ваши подобранные цвета.

Изменить цвет компонента "Navbar" (навигационного меню) также можно с помощью изменения значения переменных, отвечающих за цветовую палитру данного меню, во время создания пользовательской сборки. Для этого Вам необходимо перейти на страницу Customize веб-сайта Twitter Bootstrap, на которой в разделе "Navbar" необходимо изменить значения переменных, отвечающих за цвета, на необходимые значения. После чего переместиться вниз страницы и нажать на кнопку "Compile and Download" для получения пользовательской сборки Bootstrap.

Изменение палитры цветов navbar с помощью изменения значений переменных при создании пользовательской сборки

Данный способ в отличие от вышеприведенного (с помощью файла CSS) является более предпочтительным, т.к. он не требует дополнительного подключения файла со стилями. В итоге это приводит к уменьшению времени, необходимой для загрузки веб-страницы сайта, выполненной по данному способу.

Скачать пользовательскую сборку с красным navbar

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

В первом варианте заставку выполним в виде фонового изображения, на которой поместим текст и расположим её после навигационного меню. Код HTML, CSS и JavaScript приведём ниже с пояснениями.

<!-- Навигационное меню -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
  ...
  </div>
</nav>

<!-- Заставка -->
<div class="splash">
  <div class="container">
    <!-- Текст, размещенный на заставке -->
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>Totam rem aperiam eaque ipsa, quae ab illo inventore. Dolorum fuga deleniti 

atque corrupti, quos dolores et accusamus.</p>
  </div>
</div>

...
/* Отступ сверху для содержимого body (высота navbar = 50px)*/
body
{
padding-top: 50px;
}
/* Заставка */
.splash { 
/* Отступ для содержимого, помещенного в splash */
padding:9em 0 2em;
/* Картинка, которая используются для splash */
background-image:url(../img/bg.jpg);
/* Масштабируем картинку с сохранением пропорций */
background-size:cover;
/* Запрещаем фоновому изображению прокручиваться, т.е. делаем его неподвижным */
background-attachment:fixed;
/* Цвет текста */
color:#fff;
/* Выравниваем текста внутри splash по центру */
text-align:center;
}
(function(){
  $(window).scroll(function () {
      // значение, на которое сместилась страница при прокрутке
      var top = $(document).scrollTop();
      $('.splash').css({
        //задаём позицию фонового изображения 
        'background-position': '0px -'+(top/3).toFixed(2)+'px'
      });
  });
})();

Навигационное меню и фоновое изображение

Демо Скачать

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

<nav class="navbar navbar-default navbar-fixed-top">
  <!-- ... -->
</nav>

<div class="article container">
  <div class="row">
    <div class="col-md-8">
      <h1 class="h2 page-header">Заголовок страницы</h1>
      <!-- ... -->
    </div>
    <div class="col-md-4">
      <!-- ... -->
    </div>
  </div>
</div>

<footer>
  <div class="container">
    <!-- ... -->
  </div>
</footer>

<!-- Подключаем плагин Backstretch -->
<script src="js/jquery.backstretch.min.js"></script>
<script>
    // Устанавливаем изображение, которое будет являться фоном веб-страницы 
    $.backstretch("img/bg.jpg");
</script>
/* Отступ сверху для содержимого body */
body {
padding-top:250px;
}

/* Прозрачный фон для основного содержимого */
.article {
background:rgba(255,255,255,0.88);
padding-top: 20px;
margin-bottom: 10px;
}

/* Стили для подвала страницы */
footer {
background:rgba(255,255,255,0.7);
line-height: 30px;
padding: 0 15px 0 15px;
}

Навигационное меню и фоновое изображение, выполненное с помощью плагина Backstretch

Демо Скачать



   Bootstrap 1    70437 +1

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

  1. Ди # 0
    Подскажите как переместить зафиксированное навигационное меню скажем на 100px вниз?
    1. Александр Мальцев # 0
      Добрый день, Ди.
      Можно воспользоваться следующим CSS кодом:
      navbar-fixed-top {
      top: 100px;
      }
      
    2. MrJack # +1
      Отличная статья, спсибо за труды
      1. Егор # 0
        Здравствуйте, а как сделать, что-бы меню не выходило за рамки .container и не растягивалось на всю ширину экрана?
        1. Егор # 0
          Все. Поставил сам. Спасибо. Хорошая статья.
          1. Егор # 0
            Еще раз спасибо. У меня сайт на WordPress, собирал сам, верстал его с bootstrap сеткой. Сегодня решил обновить cтили менюшки. Я брал при сборке сниппет на гитхабе, там файл newwalker и т.д. Вобщем с вашей статьей проще намного менять стили :))) Да и вообще, пользуюсь вашим сайтом, как справочником по bootstrap.
            Хотелось бы видеть еще интересные сниппеты :)))
            Типа такого:
            Код:
            <div class="col-sm-6">
              <div class="media">
                <div class="media-body text-right">
                  <h4 class="media-heading">lorem ipsum</h4>
                  <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
                </div>
                <div class="media-right">
                  <i class="fa fa-cog"></i>
                </div>
              </div>
            </div>
            <div class="space visible-xs"></div>
            <div class="col-sm-6">
              <div class="media">
                <div class="media-left">
                  <i class="fa fa-laptop"></i>
                </div>
                <div class="media-body">
                  <h4 class="media-heading">lorem ipsum</h4>
                  <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
                </div>
              </div>
            </div>
            <!-- Дальше по аналогии -->
            
            1. Александр Мальцев # 0
              Спасибо Егор за Ваш отзыв.
              Обязательно сделаю подборки интересных сниппетов.
            2. Andrey964 # 0
              Добрый день! Активный пункт выпадающего меню по размерам вылезает за границы nav-bar. как исправить? Спасибо
              1. Александр Мальцев # 0
                Добрый день!
                Приведите Ваш код на jsfiddle.net.
                1. Andrey964 # 0
                  .sp-megamenu-parent >li.active>a {
                  color: #3d449a;
                  }
                  .sp-megamenu-parent >li:hover>a {
                  color: #3d449a;
                  background: gray;

                  }
                  .sp-megamenu-parent .sp-dropdown li.sp-menu-item >a:hover {
                  background: gray;
              2. Andrey964 # 0
                1. Andrey964 # 0
                  Разобрался. Это сделано я так понимаю чтобы не было разрыва фона между пунктом главного меню и выпадающего подменю. Когда оба имеют одинаковый фон проблемы нет
                  1. Andrey964 # 0
                    Добрый день. Еще вопрос. Как установить, чтобы подсветка пункта подменю была на всю ширину блока. Сейчас выдается с отступами слева и справа
                    1. Александр Мальцев # 0
                      Она и так по умолчанию занимает всю ширину блока. Скорее всего, на данное меню оказали влияние Ваши собственные стили. Их необходимо проверить.
                      Не знаю, как там у Вас реализовано, но всё делается просто с помощью изменения значения переменной LESS @dropdown-link-hover-bg в файле variables.less.

                      Ну, или на крайний случай можно переопределить стили Bootstrap 3:
                      nav.dropdown-menu > li > a:hover {
                        background-color: blue;
                      }
                      
                      1. Andrey964 # 0
                        использовал шаблон helix3. в файле variables.less. нет этой переменной. Может еще где посмотреть?
                        1. Александр Мальцев # 0
                          Меню этого шаблона никакого отношения к стандартному меню Bootstrap не имеет. Такие вопросы лучше задавать в разделе «Вопросы».

                          Чтобы убрать отступы необходимо изменить значение padding на «20px 0»:
                          .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
                            background: #fff;
                            box-shadow: 0 3px 5px 0 rgba(0,0,0,0.2); 
                            /* это свойство устанавливает отступы */
                            padding: 20px 0;
                          }
                          
                    2. DmBor # 0
                      Привет всем!
                      Насчет меню — понятно,
                      а вот как оформить пункт меню под свои нужды??
                      1. Александр Мальцев # 0
                        1. Настроить пункты меню можно с помощью переопределения значений свойств CSS:
                        nav .dropdown-menu {
                          /*цвет фона dropdown меню*/
                          background-color: #E74C3C;
                          /*граница*/
                          border: 1px solid rgba(0, 0, 0, 0.15);
                          /*тень меню*/
                          box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);
                        }
                        nav .dropdown-menu > li > a {
                          /*цвет текста пункта меню*/
                          color: #fff;
                        }
                        nav .dropdown-menu > li > a:hover,nav .dropdown-menu > li > a:focus {
                          /*цвет текста пункта меню при поднесении к нему курсора*/
                          color: #fff;
                          /*цвет фона пункта меню при поднесении к нему курсора*/
                          background-color: green;
                        }
                        nav .dropdown-menu .divider {
                          /*цвет разделителя*/
                          background-color: #000;
                        }
                        
                        2. Настроить пункты меню также можно с помощью переменных LESS, которые находятся в разделе Dropdowns (т.к. оно выполнено с помощью этого компонента). Изменение настроек Dropdown в этом случае повлияет не только на выпадающие меню компонента NavBar, но и на остальные компоненты, в которых данное меню (Dropdown) используется.
                      2. Артем # 0
                        фоновое изображение, которое придаёт веб-страницы некоторый
                        Мне кажется правильно веб-странице, у вас опечатка видимо. Первый абзац в Навигационное меню и фоновое изображение
                        1. Александр Мальцев # 0
                          Спасибо, Артём. Поправил.
                        2. Алексей # 0
                          Здравствуйте, недавно занялся создание сайтов с использованием бутстрапа+Joomla 3.
                          Сделал меню с раскрывающимся списком, но не могу понять как сделать родительский пункт меню активным(с переходом на закрепленную за ним ссылку). По умолчанию он неактивен. Привел код html и css может кому пригодится.
                          Код:
                          <nav class="navbar navbar-default" role="navigation" >
                            <div class="container-fluid">
                              <!-- Brand and toggle get grouped for better mobile display -->
                              <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topmenu">
                                  <span class="sr-only">Toggle navigation</span>
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                                </button>
                              </div>
                              <!-- Collect the nav links, forms, and other content for toggling -->
                              <div class="collapse navbar-collapse" id="topmenu">
                                <jdoc:include type="modules" name="position-4" style="none" />
                              </div><!-- /.navbar-collapse -->
                            </div><!-- /.container-fluid -->
                          </nav>
                          
                          Для раскрытия меню по наведению добавил CSS код:
                          .dropdown:hover > .dropdown-menu { 
                            display: block;
                          }
                          .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;
                          }
                          
                          1. Александр Мальцев # 0
                            Алексей, т.к. данная функциональность на мобильных устройствах и планшетах не нужна, то предлагаю вышеприведённый CSS код обернуть с помощью конструкции:
                            @media (max-width: 768px) {
                             ... 
                            }
                            
                            Кроме этого предлагаю ещё решение данной проблемы на JavaScript:
                            <script>
                            $(function() {
                              if ($(window).width()>=768) {
                                $('.navbar .dropdown').hover(function() {
                                  $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
                                  }, function() {
                                  $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
                                });
                                $('.navbar .dropdown > a').click(function() {
                                  location.href = this.href;
                                });
                              }
                            });
                            </script>
                            
                          2. Влади # +1
                            Огромная благодарность автору данного проекта за наглядные примеры, доступность описания + потраченное время. Желаю всех благ и развития ресурса.
                            1. Алексей # 0
                              Александр Мальцев
                              Спасибо большое опробую данный способ
                              Вот только гадаю как добавить скрипт, куда и как вставить новичек все таки )
                              // DROPDOWN CLASS DEFINITION
                                // =========================
                              
                                var backdrop = '.dropdown-backdrop'
                                var toggle   = '[data-toggle="dropdown"]'
                                var Dropdown = function (element) {
                                  $(element).on('click.bs.dropdown', this.toggle)
                                }
                              Нашел интересную надпись отвечающую за раскрытие меню возможно можно его как-то подашаминть
                              1. Алексей # 0
                                @media (max-width: 768px) {
                                 ... 
                                }
                                Код работает, но вместо max надо указать min. Иначе работает наоборот телефоны на автораскрытии меню и с пк надо кликать.
                                но вот скрипт подключить не получается
                                <script>
                                $(function() {
                                  if ($(window).width()>=768) {
                                    $('.navbar .dropdown').hover(function() {
                                      $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
                                      }, function() {
                                      $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
                                    });
                                    $('.navbar .dropdown > a').click(function() {
                                      location.href = this.href;
                                    });
                                  }
                                });
                                </script>
                                1. Сергей # 0
                                  Здравствуйте!
                                  подскажите, как изменить начало фиксации панели при скролл.Например при scroll 50 или scroll 100.До этих значений чтобы было статическое меню.
                                  Спасибо
                                  1. Александр Мальцев # 0
                                    Здравствуйте, Сергей!
                                    Это делается с помощью плагина Bootstrap Affix.

                                    CSS:
                                    /* режим affix */ 
                                    #nav.affix {
                                      top: 0;
                                      width: 100%;
                                    }
                                    
                                    HTML:
                                    <!-- Навигационное меню -->
                                    <nav id="nav" class="navbar navbar-default">
                                      ...
                                    </nav>
                                    
                                    <script>
                                    $('#nav').affix({
                                      offset: {
                                        // устанавливаем 100px, или любое другое значение 
                                        top: 100
                                      }
                                    });
                                    </script>
                                    
                                  2. Yaroslav # 0
                                    Здравствуйте! А как реализовать меню чтобы вместо navbar-header была картинка? Я пробовал, но макет при этом ломается
                                    1. Dmitriy # 0
                                      Немного дополню вопрос выше: картинка в navbar-header больше стандартной высоты navbar-header, если переопределить высоту на фиксированную, то ломается адаптивность
                                      И мой вопрос: в пунктах меню есть картинка и текст, как убрать картинку, когда меню сворачивается в кнопку на маленьких экранах
                                      ПС спасибо автору за уроки!
                                      1. Александр Мальцев # 0
                                        Я так и не совсем понял, Вы хотите переопределить navbar-brand или весь navbar-header.

                                        Если Вы хотите попенять кнопку в navbar-header, то можно сделать так:
                                        1. Переопределить отступы в CSS:
                                        .navbar-toggle {
                                          padding: 0px !important;
                                          margin-top: 10px !important;
                                          margin-bottom: 10px !important;
                                          border: none !important;
                                        }
                                        
                                        2. Заменить navbar-header на следующий HTML-код:
                                            <div class="navbar-header">
                                              <a class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-
                                        navbar-collapse-1" aria-expanded="false">
                                                <span class="sr-only">Toggle navigation</span>
                                                <img class="img-rounded" src="1.jpg" height="56">
                                              </a>
                                            </div>
                                        
                                        В этом случае вместо кнопки открывающей меню будет картинка высотой 56px.

                                        Убрать картинки в меню на xs (<768px) можно используя следующий CSS-код:
                                        @media (max-width: 768px) {
                                          .navbar .nav img{
                                            display: none;
                                          }
                                        }
                                        
                                      2. Александр Мальцев # 0
                                        Здравствуйте.
                                        По умолчанию данная область (navbar-brand) имеет высоту 20px. Она получается следующим образом:
                                        50px (высота navbar) — 30px (внутренние отступы padding сверху и снизу по 15px, которые задаются с помощью класса .navbar-brand).
                                        <a class="navbar-brand" href="#">Brand</a>
                                        
                                        Если вы хотите поместить туда картинку, большего размера, например с высотой 30px, то надо тогда изменить эти отступы на 10px (50-10*2=30px):
                                        <!-- CSS: -->
                                        .navbar-brand {
                                          padding: 10px 15px !important;
                                        }
                                        <!-- HTML -->
                                        <a class="navbar-brand" href="#">
                                          <img src="1.jpg" height="30">
                                        </a>
                                        
                                        А если вы хотите поместить туда картинку с высотой 40px, то надо тогда изменить эти отступы на 5px (50-5*2=40px):
                                        <!-- CSS: -->
                                        .navbar-brand {
                                          padding: 5px 15px !important;
                                        }
                                        
                                        1. Андрей # 0
                                          Попытался поставить логотип в navbar-brend, но он почему-то съезжал вниз, пока не указал выравнивание align=«left».
                                          Но при установке картинки 40px текст бренда становится не по середине полосы navbar. Можно его выровнять по центральной линии?
                                          И еще вопрос по navbar — выпадающее меню при широком экране всегда белое, или его цвет тоже можно настроить?
                                          1. Александр Мальцев # 0
                                            Может какие-то Ваши стили это изменяют. Проверьте на чистом Bootstrap без использование своих стилей.
                                            Выпадающее меню — это dropdown-menu. Попробуй его настроить с помощью изменения стилей, представлено в этом комментарии:
                                            itchief.ru/lessons/bootstrap-3/119-bootstrap-3-customize-the-navbar#comment-902
                                            1. Андрей # 0
                                              На чистом Bootstrap на черной стандартной теме выпадающее меню на полном экране тоже белое. На вашем сайте тоже выпадающее белое. А в мобильном виде все подразделы окрашены. Возможно так и должно быть, но есть сомнения.
                                              1. Александр Мальцев # 0
                                                Всё зависит от Вашего желания. Можно настроить как угодно.
                                                Настроить dropdown можно по приведённой ссылке выше. Просто надо попробовать.
                                                _https://jsfiddle.net/itchief/84oeut2a/
                                      3. Alex # 0
                                        У кого то была проблемы с прыгающей нав панелью фиксированной при быстром скролинге?
                                        1. Александр Мальцев # 0
                                          Проверьте Ваши стили…
                                          Такой проблемы у компонента нет.
                                        2. Aleksandr Ustinov # 0
                                          Доброго времени суток! Подскажите пожалуйста
                                          (1)как сделать так что бы Toggle navigation появлялась не на маленькх а например на среднем экране.И еще вопрос
                                          (2)как переопределить стили для выпадающего меню Toggle navigation
                                          Спасибо!
                                          1. Александр Мальцев # 0
                                            Здравствуйте, Александр.
                                            (1) Измените 1000 на необходимое Вам значение и вставьте стили в Ваш файл CSS:
                                            @media (max-width: 1000px) {
                                              .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;
                                              }
                                            }
                                            
                                            (2) Стили для dropdown-menu:
                                            .navbar .dropdown-menu {
                                              /* цвет фона dropdown */
                                              background-color: #ffffff;
                                              border: 1px solid rgba(0,0,0,.15);
                                              box-shadow: 0 6px 12px rgba(0,0,0,.175);
                                            }
                                            .navbar .dropdown-menu .divider {
                                              /* цвет разделителя */
                                              background-color: #e5e5e5;
                                            }
                                            .navbar .dropdown-menu > li > a {
                                              color: #333333;
                                            }
                                            .navbar .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
                                              color: #262626;
                                              background-color: #f5f5f5;
                                            }
                                            .navbar .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
                                              color: #ffffff;
                                              background-color: #337ab7;
                                            }
                                            
                                            1. Aleksandr Ustinov # 0
                                              спасибо
                                          2. Aleksandr Ustinov # 0
                                            Код работает но что то не то, мне нужно что бы меню «полосочки» появлялось лишь тогда когда когда я захочу(с определенного момента) а именно «На устройствах имеющих средний размер экрана (md)» а оно появляется только лишь на «На устройствах имеющих маленький размер экрана (sm)» а если я ставлю разные цифры в начале ((1) Измените 1000 на необходимое Вам значение и вставьте стили в Ваш файл CSS:) то меню просто меняет центрирование с правого на левое на данной ширене экрана
                                            1. Aleksandr Ustinov # 0
                                              _test.theone1.ru это сайт который делаю
                                              1. Александр Мальцев # 0
                                                Должно работать.
                                                Посмотри на http://jsfiddle.net/itchief/agq7wq1g/.
                                                Или что-то другое хочешь?
                                                1. Aleksandr Ustinov # 0
                                                  самое главное там работает! а у меня на сайте нет! Сворачивает в меню только на 750
                                              2. Aleksandr Ustinov # 0
                                                все сделал! нашел дублера в css
                                                1. Андрей # 0
                                                  спасибо. С новым годом! не могу разобраться как в выпадаюшем верхнем меню подсветку при наведении курсора сделать. у меня вордпресс с бутстрап шаблоном. цсс поправляю как могу, но результата нет. верхнее меню подсвечивается без проблем, а выпадающее никак. в стилях собакаа порылась. если знаете, помогите.
                                                  1. Александр Мальцев # 0
                                                    Андрей, с новым годом!
                                                    Ответ на данный вопрос смотри в этом комментарии. А именно в (2) Стили для dropdown-menu:
                                                    Если не будут применяться, то добавьте !important:
                                                    .navbar .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
                                                      color: #262626 !important;
                                                      background-color: #f5f5f5 !important;
                                                    }
                                                    
                                                  2. Ануш # 0
                                                    Здравствуйте. Как сделать navbar-fixed-top по центру. Не как не получается.
                                                    Код
                                                    <div class="container-fluid  menu-border">
                                                    <nav role="navigation" class="navbar navbar-default ">
                                                    <div class="container">
                                                      <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>
                                                      </div>
                                                    
                                                      <div id="navbarCollapse" class="collapse navbar-collapse ">
                                                     <ul id="nav" class="nav navbar-nav  pull-center ">
                                                    <li><a href="#">ГЛАВНАЯ</a></li>
                                                    <li class="gic"><a href="#">О КОМПАНИИ</a></li>
                                                    <li class="gic"><a href="#">КАТАЛОГ</a></li>
                                                    <li class="gic"><a href="#">САНТЕХНИЧЕСКИЕ УСЛУГИ</a></li>
                                                    <li class="gic"><a href="#">СКИДКИ</a></li>
                                                    <li class="gic"><a href="#">ОПЛАТА И ДОСТАВКА</a></li>
                                                    <li class="gic"><a href="#">КОНТАКТЫ</a></li>
                                                    </ul>
                                                    </div>
                                                    </div>
                                                    </nav>
                                                    
                                                    </div>
                                                    
                                                    
                                                    .menu-border{background-color:#fff;margin-top:10px;border-top:1px solid #858585;border-left:1px solid #858585;border-right:1px solid #858585;}
                                                    .navbar { position: relative;min-height: 40px;margin:0px;width:100%;  }
                                                    .navbar-default {background-color:#fff; color:#000;border-style: none; }
                                                    #nav{background-color:#fff;color:#000;font-size:12px;font-weight:bold;font-family:Times New Roman;}
                                                    .navbar-default .navbar-nav > li > a{color: #000;background-color: transparent;}
                                                    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {color: rgb(51, 51, 51);background-color:#e3e3e3;}
                                                    .nav > li > a {position: relative;display: block;padding: 10px auto;color: #000;}
                                                    
                                                    1. Александр Мальцев # 0
                                                      Здравствуйте.
                                                      Добавьте добавьте в конце вашего CSS следующий код.
                                                      CSS код
                                                      @media (min-width: 768px) {
                                                        .navbar .navbar-collapse ul {
                                                          position:relative;
                                                          left:50%;
                                                          float:left;
                                                          margin-right:0;
                                                          margin-left:0;
                                                        }
                                                        .navbar .navbar-collapse li {
                                                          position:relative;
                                                          right:50%;
                                                          float:left;
                                                          margin:0;
                                                          list-style:none;
                                                        }
                                                      }
                                                      
                                                      1. Ануш # 0
                                                        Спасибо ) НО появляется полоса прокрутки. Что не так?
                                                    2. Virtas # 0
                                                      Подключил bootstrap все работает меню работает блоки и все такое только дефолтное а вот стили не сторонние например ваши подгружаются только с применением !important
                                                      1. Александр Мальцев # 0
                                                        Их необходимо располагать или подключать после строчки, в которой Вы подключаете bootstrap.min.css.
                                                      2. Святослав # 0
                                                        Здравствуйте, скажите а как сделать свои размеры навигационной панели, мне нужно ширина 960px высота 100px? И все кнопки в левую сторону а лого в правую
                                                        1. Александр Мальцев # 0
                                                          Высоту navbar можно установить различными путями:
                                                          1. С помощью CSS:
                                                          .navbar-brand,
                                                          .navbar-nav>li>a {
                                                            height: 100px;
                                                            line-height: 100px;
                                                            padding-top: 0;
                                                          }
                                                          
                                                          2. Собственная сборка с высотой navbar 100px: _http://getbootstrap.com/customize/
                                                          3. С помощью переменной LESS.

                                                          Если Вам нужна фиксированная ширина (960px), то так:
                                                          .navbar {
                                                            width:960px !important;
                                                            margin-left: auto;
                                                            margin-right:auto;
                                                          }
                                                          
                                                          Но т.к. ширина панели будет фиксированной, то некоторую разметку можно убрать:
                                                          <nav class="navbar navbar-default">
                                                            <a class="navbar-brand" href="#">Brand</a>
                                                            <ul class="nav navbar-nav">
                                                              <li class="active"><a href="#">1 Ссылка</a></li>
                                                              <li><a href="#">2 Ссылка</a></li>
                                                            </ul>
                                                          </nav>
                                                          
                                                          Ну и добавить некоторые стили для того чтобы выровнять элементы и убрать сворачивание:
                                                          .navbar-nav {
                                                            margin:0;
                                                            float:left;
                                                          }
                                                          .navbar-nav > li {
                                                            float:none;
                                                            display:inline-block;
                                                          }
                                                          .navbar-nav > li.open > ul.dropdown-menu {
                                                            position: absolute;
                                                            border: 1px;
                                                            background-color: #fff;
                                                            -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
                                                            box-shadow: 0 6px 12px rgba(0,0,0,.175);
                                                          }
                                                          .navbar-brand {
                                                            float: right !important;
                                                          }
                                                          
                                                        2. Jelena # 0
                                                          Подскажите, пожалуйста, как поменять цвет у класса icon-bar в Toggle navigation при hover?
                                                          Скажем я хочу, чтоб полоски «гамбургера» были красными при наведении курсора, и когда кнопка в состоянии «active».
                                                          1. Александр Мальцев # 0
                                                            Здравствуйте, можете использовать следующий скрипт:
                                                            $(function() {
                                                              var color = '#ff0000';
                                                              var show = false;
                                                              var active = false;
                                                              $('.navbar-default .navbar-toggle').hover(
                                                                function(){
                                                                  $('.navbar-default .navbar-toggle .icon-bar').css('background-color',color);
                                                                },
                                                                function(){
                                                                  if (show==true) return;
                                                                  if (active==true) return;
                                                                  $('.navbar-default .navbar-toggle .icon-bar').css('background-color','#888');
                                                                }
                                                              );
                                                              $('.navbar-default .navbar-toggle')
                                                                .focus(function(){
                                                                  active = true;
                                                                  $('.navbar-default .navbar-toggle .icon-bar').css('background-color',color);
                                                                })
                                                                .blur(function() {
                                                                  if (show==true) return;
                                                                  active = false;
                                                                  $('.navbar-default .navbar-toggle .icon-bar').css('background-color','#888');
                                                              });
                                                              //#navbar-collapse - id блока, имеющего класс .navbar-collapse
                                                              $('#navbar-collapse').on('show.bs.collapse', function () {
                                                                show = true;
                                                                $('.navbar-default .navbar-toggle .icon-bar').css('background-color',color);
                                                              });
                                                              //#navbar-collapse - id блока, имеющего класс .navbar-collapse
                                                              $('#navbar-collapse').on('hide.bs.collapse', function () {
                                                                show = false;
                                                              });
                                                            });
                                                            
                                                            Решение конечно не самое оптимизированное получилось :)
                                                            1. Jelena # 0
                                                              Большое спасибо за ответ. Решение, и правда, впечатляет. Это ж не лень вам было время тратить :)
                                                              Обязательно попробую и отпишу.
                                                              1. Александр Мальцев # 0
                                                                Набросал то его сразу. А вот оптимизировать его как-то или записать более элегантно не получилось :) Может кто-то из посетителей предложит более простой и интересный вариант.
                                                          2. Роман # 0
                                                            как сделать на размере lg margin-left:100px;
                                                            а на md margin-left:50px;
                                                            1. Александр Мальцев # 0
                                                              Например, изменить у элементов, имеющих класс block:
                                                              @media screen and (min-width: 992px) and (max-width: 1200px) {
                                                                .block {
                                                                  margin-left:50px;
                                                                }
                                                              }
                                                              @media screen and (min-width: 1200px) {
                                                                .block {
                                                                  margin-left:100px;
                                                                }
                                                              }
                                                              
                                                            2. Дмитрий # 0
                                                              Подскажите пожалуйста, что в bootstrap отвечает за толщину навбара. Можно ли его сделать уже?
                                                              1. Александр Мальцев # 0
                                                                1. С помощью CSS (например, 30px):
                                                                .navbar-nav > li > a, .navbar-brand {
                                                                    padding-top:4px !important; 
                                                                    padding-bottom:0 !important;
                                                                    height: 30px;
                                                                }
                                                                .navbar {
                                                                  min-height:30px !important;
                                                                }
                                                                
                                                                2. Собрать свою сборку (на странице _http://getbootstrap.com/customize/ или с помощью изменения переменной LESS). За высоту navbar отвечает @navbar-height.
                                                              2. Dmitry # 0
                                                                Александр, только начал вникать в Bootstrap). Подскажите, а как не меняя особо поставку (а например, в своей дополнит. CSS), сделать чтобы сверху фиксированного меню типа navbar-fixed-top была небольшой высоты строка, куда размещу типа header (логотип, название сайта, телефон...)?
                                                                1. Dmitry # 0
                                                                  вот пример, что хочется… _http://p120.createme.tk/
                                                                  шапка над фиксированным меню, при прокрутке шапка может исчезать…
                                                                  1. Александр Мальцев # 0
                                                                    Это делается в Bootstrap 3 с помощью Affix.
                                                                    1. Фиксированная шапка.
                                                                    HTML:
                                                                    <body>
                                                                      <header id="header">
                                                                        <div class="container-fluid">
                                                                          <div style="height: 100px; background-color: green;"></div>
                                                                        </div>
                                                                      </header>
                                                                      <nav class="navbar navbar-default" id="myAffix" data-spy="affix" data-offset-top="100">
                                                                        <div class="container-fluid">
                                                                          ...
                                                                        </div>
                                                                      </nav>
                                                                      ...
                                                                    
                                                                    CSS:
                                                                    .affix {
                                                                      top: 0;
                                                                      width: 100%;
                                                                    }
                                                                    
                                                                    2. Если Вы не знаете какая будет высота шапки, то необходимо написать функцию, которая будет вычислять высоту шапки автоматически.
                                                                    HTML:
                                                                    <body>
                                                                      <header id="header">
                                                                        <div class="container-fluid">
                                                                          <div style="height: 100px; background-color: green;"></div>
                                                                        </div>
                                                                      </header>
                                                                      <nav class="navbar navbar-default" id="myAffix">
                                                                        <div class="container-fluid">
                                                                          ...
                                                                        </div>
                                                                      </nav>
                                                                      ...
                                                                    
                                                                    CSS:
                                                                    .affix {
                                                                      top: 0;
                                                                      width: 100%;
                                                                    }
                                                                    
                                                                    JavaScript:
                                                                    $(function(){
                                                                      $('#myAffix').affix({
                                                                        offset: {
                                                                          top: function () {
                                                                            return (this.top = $('#header').outerHeight(true))
                                                                          }
                                                                        }
                                                                      });
                                                                    });
                                                                    
                                                                  2. Михаил # 0
                                                                    Здравствуйте. Почему то при уменьшении размера экрана меню фиксируется с небольшим опозданием, и чем меньше экран, тем больше опоздание. Нельзя ли изменить скрипт чтобы было точнее вычисление при уменьшении экрана, или может в свойствах надо что дописать?
                                                                    1. Александр Мальцев # 0
                                                                      Не знаю что у Вас тормозит. Время за которое элемент переходит из одного состояние в другое составляет 0-2мс. Может быть у Вас это действие выполняется с анимацией. Вот простенький скрипт, который позволяет получить время за которое элемент переход из состояния affix-top в affix и обратно.
                                                                      <script>
                                                                       $('#myAffix').on('affix.bs.affix',function(){
                                                                        console.time('timer1');
                                                                       });
                                                                       $('#myAffix').on('affixed.bs.affix',function(){
                                                                        console.timeEnd('timer1');
                                                                       });
                                                                       $('#myAffix').on('affix-top.bs.affix',function(){
                                                                        console.time('timer2');
                                                                       });
                                                                       $('#myAffix').on('affixed-top.bs.affix',function(){
                                                                        console.timeEnd('timer2');
                                                                       });
                                                                      </script>
                                                                      
                                                                      1. Михаил # 0
                                                                        Разобрался. Всё со скриптом хорошо, просто после каждого уменьшения экрана надо перезагрузить страницу(ну а иначе как скрипт сработает?). Казалось бы логично, а сколько нервов попортило :) Большое спасибо за все ваши ответы
                                                                    2. Антон # 0
                                                                      Спасибо большое автору! Хорошая статья!
                                                                      1. Борис # 0
                                                                        У меня проблема скомпилил себе navbar на странице getbootstrap.com/customize/ высота 100.
                                                                        Добавляю бордер navbar'у border-bottom: 5px solid #dddddd;.
                                                                        Получаю следующее высота navbar увеличивается на 5px. а мне надо сделать как тут (http://openaddon.com/joomla/vt_family/index.php) то есть кнопочка и нижний боредер соприкасаются.
                                                                        Если указать жестко высоту height: 100px;. То мобильная версия самой собой не работает(((
                                                                        Подскажите как сделать, замучился.
                                                                        1. Борис # 0
                                                                          Разобрался все просто достаточно добавлять высоту только если навбар не изменился.

                                                                          @media (min-width: 769px) {
                                                                          .mynavbar {
                                                                          height: 105px;
                                                                          }
                                                                          }
                                                                          1. Иван # 0
                                                                            Здравствуйте.
                                                                            Пожалуйста подскажите
                                                                            Столкнулся с проблемой преобразования navbar'a в открывающую его кнопку при ширине 767 и меньше px. Как убрать эту фичу?
                                                                            1. Александр Мальцев # 0
                                                                              Наиболее просто это осуществить с помощью изменения переменной LESS @grid-float-breakpoint на значение 0, например, на странице getbootstrap.com/customize/.
                                                                              Вот ссылка на сборку Bootstrap, у которой переменная @grid-float-breakpoint имеет значение 0:
                                                                              getbootstrap.com/customize/?id=37773b5afa0006199c9c7af096003264

                                                                            2. Юрий # 0
                                                                              Здравствуйте, Александр!
                                                                              Меню по умолчанию может сворачиваться в кнопку, саму кнопку можно настроить под себя или заменить на рисунок. А как сделать, чтобы вместо кнопки подключался слайдер, например, типа elastislide?
                                                                              1. Артём # 0
                                                                                Подскажите как можно убрать полосу прокрутки которая появляется при раскрытии кнопки на маленьких экранах?
                                                                                1. Александр Мальцев # 0
                                                                                  Что за полоса прокрутки и как она возникает? Опишите подробнее.
                                                                                2. Константин # 0
                                                                                  Отличная статья! Автору +… Возможно еще смогу получить ответ на свой вопрос по Collapse Accordion group list: заметил очень неудобную штуку, когда так называемая гармошка расположена внизу страницы и выпадает вниз за область просмотра, в итоге нужно скролить страницу вниз, бывает наоборот, когда скролом пропустил гармошку вверх области просмотра, а потом решил её расскрыть — она выпадает наверх:(
                                                                                  Возможно ли как то задавать направление для этой самой гармошки и можно ли как-то закрепить область просмотра гармошки, чтобы выпадающие списки оставались в поле зрения (в области просмотра, без необходимости скролить страницу)???
                                                                                  Заранее спасибо
                                                                                  1. Александр Мальцев # 0
                                                                                    Спасибо.
                                                                                    Самый простой способ сделать так, чтобы гармошка открывалась вверх — это поменять блоки контента и заголовка местами:
                                                                                    <div class="panel-group" id="accordion">
                                                                                      <div class="panel panel-default">
                                                                                        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel">
                                                                                          <div class="panel-body">
                                                                                            Содержимое 1...
                                                                                          </div>
                                                                                        </div>
                                                                                        <div class="panel-heading" id="headingOne">
                                                                                          <h4 class="panel-title">
                                                                                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                                                                              Заголовок 1
                                                                                            </a>
                                                                                          </h4>
                                                                                        </div>
                                                                                      </div>
                                                                                    </div>
                                                                                    
                                                                                    Другой способ — это предоставить блоку (гармошки) пространство для открытия сверху и убрать возможность ему открытия вниз. Для этого всё содержимое гармошки необходимо обернуть в блок с классом header-up и добавить следующие CSS-стили:
                                                                                    .panel-group {
                                                                                      position: absolute;
                                                                                      width: 100%;
                                                                                      bottom: 0;
                                                                                      margin: 0
                                                                                    }
                                                                                    .header-up {
                                                                                      padding: 0;
                                                                                      position: relative;
                                                                                      height: 300px;
                                                                                    }
                                                                                    
                                                                                    <div class="header-up">
                                                                                      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                                                                                        ...
                                                                                      </div>
                                                                                    </div>
                                                                                    
                                                                                    Вторая часть вопроса немного не понятна. Если Вы хотите чтобы гармошка была всегда в области просмотра, то используйте Affix.
                                                                                    Если нужно прокручивать программно, то попробуйте следующее:
                                                                                    $('#accordion').on('shown.bs.collapse', function (e) {
                                                                                       var id = $(e.target).prev().find("[id]")[0].id;
                                                                                       $('html, body').animate({
                                                                                         scrollTop: $("#" + id).offset().top
                                                                                       }, 1000);
                                                                                    })
                                                                                    
                                                                                    1. Kos # 0
                                                                                      Увы, самый простой способ не подошел, он буквально меняет местами заголовок и содержание, при таком варианте во время просмотра создается вппечатление что контент нижней вкладки относится к закрытому (.collapse) заголовку, который расположен выше(((
                                                                                      1. Александр Мальцев # 0
                                                                                        Попробуйте тогда 2 вариант.
                                                                                  2. Александр # 0
                                                                                    А вот у меня такой вопрос.
                                                                                    При нормальном просмотре на компе выпадающий список белого цвета,
                                                                                    если к примеру меню красное. А при адаптивном виде выпадающий список
                                                                                    такого же цвета как и меню, тоже красный.
                                                                                    Подскажите, какие классы отвечают за фоновый цвет выпадающего списка
                                                                                    при адаптивном просмотре?
                                                                                    1. Александр # 0
                                                                                      А вот, все… Решил проблему
                                                                                      Вот так прописал
                                                                                      .navbar .dropdown-menu li {
                                                                                        background-color: #fff;
                                                                                      }
                                                                                      1. Алексей # 0
                                                                                        Здравствуйте!

                                                                                        Необходимо частично отключить адаптивность меню на мобильных, оставить только автовыравнивание по ширине.

                                                                                        Прописал css указанные на bootstrap сайте.

                                                                                        1. На компьютере отображается как надо.
                                                                                        itchief.ru/assets/uploadify/1/a/0/1a0442f6577dcc3b2dad8a3e3d89ebb2.png

                                                                                        2. Пробовал на телефоне, все равно складывается, гугл тест тоже складывает.
                                                                                        itchief.ru/assets/uploadify/e/a/9/ea915404a7a76681f3f11cba9357250d.png

                                                                                        В чем может быть проблема?
                                                                                        1. Александр Мальцев # 0
                                                                                          Если Вы хотите отключить схлопывание меню, то лучше этого сделать через собственную сборку, например на странице customize.
                                                                                          Для этого Вам необходимо будет установить переменной@grid-float-breakpoint значение 0.
                                                                                          Посмотрите этот комментарий:
                                                                                          itchief.ru/lessons/bootstrap-3/38-bootstrap-3-navigation-menu#comment-2034
                                                                                        2. Михаил # 0
                                                                                          Здравствуйте. Помогите пожалуйста в очередной раз. При уменьшении монитора до смартфона появляется белая полоса сбоку, т.е все блоки сжимаются, а меню не до конца, оставляя под собой полосу. Может я чё в стилях перемудрил?
                                                                                          itchief.ru/assets/uploadify/9/2/3/923532ff220b620bd71c020ff60851f0.png
                                                                                          1. Михаил # 0
                                                                                            И ещё вопрос. Возможно ли расположить список в открывающемся меню не по левую сторону, а по правую, или по середине?
                                                                                            1. Михаил # 0
                                                                                              По второму вопросу разобрался. Помог обычный text-align для списка ( это так, может кому тоже будет нужно). Ну а с первым никак, help…
                                                                                            2. Александр Мальцев # 0
                                                                                              Здравствуйте. Проверьте, может отступы padding или margin. В таких случаях желательно изучать страницу с помощью панели разработчика (Ctrl+Shift+I). В этой панели есть вкладка Elements. А в ней вкладка Styles. На этой вкладке (Styles) отображаются стили, которые применены к выбранному элементу. Выбор элемента осуществляется либо визуально на странице, либо в дереве, которое расположено во вкладке Elements. Используя эти инструменты попробуйте изучить то, что Вы там перемудрили.
                                                                                              1. Vladimir # 0
                                                                                                В классе .row пропишите margin-left: 0; и margin-right: 0;
                                                                                              2. Кирилл Ерофеев # 0
                                                                                                Суть проблемы: при разрешении экрана 675 пикселей и меньше появляется отступ, который хотелось бы убрать. Меню .navbar-static-top. Ну и картинки для примера
                                                                                                itchief.ru/assets/uploadify/6/f/3/6f3c4c58bbb6e2dc7d39c59b51fd00c5.png
                                                                                                itchief.ru/assets/uploadify/2/2/b/22b89d3b47841aaa3287cb6692604c14.png
                                                                                                1. Александр Мальцев # 0
                                                                                                  По одним картинкам сложно определить. Желательно привести страницу на jsfiddle.net или подобном сервисе.
                                                                                                2. Женя Епифальцев # 0
                                                                                                  У вас в примере есть картинка после меню с эффектом паралакса(фоновое изображение) Не подскажете, как менять ее размер? Спасибо!
                                                                                                  1. Александр Мальцев # 0
                                                                                                    В примере высота элемента, содержащее фоновое изображение, определяется в зависимости от содержимого, которое в него помещено и внутренних полей до этого содержимого (вверху — 9em, снизу — 2em и 0em — справа и слева).
                                                                                                    .splash { 
                                                                                                      padding: 9em 0 2em;
                                                                                                    }
                                                                                                    
                                                                                                    Но никто Вам не мешает установить данному элементу фиксированную высоту
                                                                                                    .splash { 
                                                                                                      height: 150px;
                                                                                                    }
                                                                                                    
                                                                                                    или фиксированную на определённом диапазоне
                                                                                                    .splash {
                                                                                                      height: 100px;
                                                                                                    }
                                                                                                    @media (min-width: 768px) {
                                                                                                      .splash {
                                                                                                        height: 125px;
                                                                                                      }
                                                                                                    }
                                                                                                    @media (min-width: 992px) {
                                                                                                      .splash {
                                                                                                        height: 250px;
                                                                                                      }
                                                                                                    }
                                                                                                    @media (min-width: 1200px) {
                                                                                                      .splash {
                                                                                                        height: 200px;
                                                                                                      }
                                                                                                    }
                                                                                                    
                                                                                                    1. Женя Епифальцев # 0
                                                                                                      Огромное вам спасибо!
                                                                                                  2. Мария # 0
                                                                                                    Здравствуйте, статья супер. Но у меня почему-то в стили бутстрапа не стилизируються в CSS. Никакой реакции. В чем может быть проблема?
                                                                                                    1. Александр Мальцев # 0
                                                                                                      Здравствуйте, спасибо.
                                                                                                      Представленные стили необходимо вставлять в свой файл CSS, который должен быть подключен после основного файла bootstrap.min.css. Или если его нету, то создать и подключить его после bootstrap css с помощью тега link.
                                                                                                      Или можете прямо вставить на страницу. Для этого создайте в разделе head после bootstrap css элемент style и вставьте туда код css.
                                                                                                      <style>
                                                                                                        ...
                                                                                                      </style>
                                                                                                      
                                                                                                    2. Александр # 0
                                                                                                      После перехода по пункту меню — меню не закрывается и загораживает пол-экрана.

                                                                                                      Куда копать?
                                                                                                      1. Александр Мальцев # 0
                                                                                                        Попробуйте добавить на страницу следующий скрипт:
                                                                                                        <script>
                                                                                                        $(function(){
                                                                                                          $(document).on('click','.navbar-collapse.in',function(e) {
                                                                                                            if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
                                                                                                              $(this).collapse('hide');
                                                                                                            }
                                                                                                          });
                                                                                                        });
                                                                                                        </script>
                                                                                                        
                                                                                                      2. Василий # 0
                                                                                                        Подскажите пожалуйста как можно прикрепить navbar-brand справа к кнопке свёрнутого меню collapse только на маленьких разрешениях? Как скрыть — понятно — через .hidden-xs и .hidden-sm а как сместить вправо?
                                                                                                        Вот как-то так:

                                                                                                        Заранее спасибо.
                                                                                                        1. Александр Мальцев # 0
                                                                                                          Добавить в свой файл CSS:
                                                                                                          .navbar-brand {
                                                                                                            float: right !important;
                                                                                                          }
                                                                                                          
                                                                                                          1. Василий # 0
                                                                                                            Туплю. Спасибо. Я так понимаю, для того, чтобы данный костыль работал только на мобильных версиях, надо использовать медиазапросы? А стандартными средствами бутстрапа не получится?
                                                                                                            1. Василий # 0
                                                                                                              Сам нашёл: класс pull-right
                                                                                                              Спасибо за наводку
                                                                                                        2. Invar # 0
                                                                                                          Здравствуйте! Подскажите как сделать фон меню прозрачным? Устанавливал opacity для всего меню, только и текст ссылок получается прозрачным. А надо что б только фон. За ним видна картинка шапки сайта. Спасибо! И за урок тоже!!!
                                                                                                          1. Василий # 0
                                                                                                            в своей таблице написать:
                                                                                                            .navbar {
                                                                                                                background-color: rgba(255, 255, 255, 0);
                                                                                                            }
                                                                                                          2. ds # 0
                                                                                                            Добрый день.
                                                                                                            Подскажите пожалуйста как настроить меню так чтобы такая кнопка как на мобильной версии была и с компьютера выпадающее меню как на скриншоте.

                                                                                                            Заранее спасибо
                                                                                                            1. Александр Мальцев # 0
                                                                                                              Как сделать такое меню можно посмотреть, перейдя по следующей ссылке (jsfiddle.net):
                                                                                                              Меню с кнопкой dropdown
                                                                                                            2. Сергей # 0
                                                                                                              Привет! Подскажите, пожалуйста, при переходе на страницу не подсвечивается фон активной кнопки меню. Получается, что если я напишу код #ссылка, то фон будет всегда подсвечен возле этой одной кнопки. Но так как меню у меня заключено в <?php include 'menu.php'; ?>, то он получается одинаковым для всех страничек. Получается, что всегда подсвечена только одна ссылка. А мне бы сделать так, чтобы пользователь видел подсвеченный фон той кнопки, на которую он нажал при переходе. Надеюсь, понятно рассказал. Подскажите, пожалуйста, буду благодарен!!!
                                                                                                              1. Александр Мальцев # +1
                                                                                                                Если вы хотите сделать это на стороне клиента, то необходимо написать сценарий JavaScript. Данный код должен после загрузки страницы определить текущий адрес страницы (location.pathname) и найти ему соответствующий пункт меню. После этого для найденного элемента a (anchor) определить li и добавить к нему класс active.
                                                                                                                $(function() {
                                                                                                                  // перебрать все элементы a меню navbar
                                                                                                                  $('.navbar-nav a').each(function() {
                                                                                                                    // определяем, является ли искомый пункт нужным
                                                                                                                    if (($(this).prop('href').toString()).indexOf((location.pathname.slice(1).toString())) !== -1) {
                                                                                                                      // добавляем к родительскому пункту класс active
                                                                                                                      $(this).parent('li').addClass('active');
                                                                                                                      // прерываем дальнейшее выполнения метода each
                                                                                                                      return false;
                                                                                                                    }
                                                                                                                  });
                                                                                                                });
                                                                                                                
                                                                                                                Но всё это зависит от того, как реализовано меню.
                                                                                                                Кроме этого меню необходимо включать на страницу без класса active. Это позволит не выполнять после загрузки страницы лишние действия по его удалению, что немного увеличит быстродействие.
                                                                                                                1. Сергей # 0
                                                                                                                  Вы Гений!!!
                                                                                                              2. Stas # 0
                                                                                                                а как сделать чтобы меню при нажатии на кнопку выпадало вверх, на примере стандартного bootstrap? тоесть в обычном состоянии оно выпадает вниз и сдвигает весь контент, а как сделать чтоб оно открывалось вверх и тоже сдвигался контент как на картинке
                                                                                                                1. Александр Мальцев # 0
                                                                                                                  Очень просто.
                                                                                                                  Необходимо блок с классом navbar-collapse расположить до блока с классом navbar-header, т.е. поменять их местами.
                                                                                                                  <nav class="navbar navbar-default">
                                                                                                                    <div class="container-fluid">
                                                                                                                  
                                                                                                                      <div class="collapse navbar-collapse" id="main-menu">
                                                                                                                        ...
                                                                                                                      </div>
                                                                                                                      
                                                                                                                      <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 class="navbar-brand" href="#">Brand</a>
                                                                                                                      </div>
                                                                                                                     
                                                                                                                    </div>
                                                                                                                  </nav>
                                                                                                                  

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