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

Александр Мальцев
Александр Мальцев
186K
146
Содержание:
  1. Изменение цвета navbar (навигационного меню) с помощью CSS
  2. Изменение цвета навигационного меню при создании пользовательской сборки
  3. Навигационное меню и фоновое изображение
  4. Комментарии

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

Изменение цвета navbar (навигационного меню) с помощью CSS

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

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

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

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

Код HTML

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

Код CSS

/* цвет фона и рамки навигационного меню */
.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

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

1 Вариант

В первом варианте заставку выполним в виде фонового изображения, на которой поместим текст и расположим её после навигационного меню. Код 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'
      });
  });
})();

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

Демо Скачать

2 Вариант

Во втором варианте фоновое изображение для веб-страницы создадим с помощью плагина 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

Демо Скачать

Комментарии:

  1. Илья
    Илья
    29.06.2021, 09:16
    Добрый день! Как можно сделать ваше меню, чтобы оно было ниже шапки, но затем когда опускаешься вниз, то было сверху закреплено как и сейчас? Пример того, что я имею ввиду вот здесь: codepen.io/senff/pen/ayGvD но хочу это сделать с вашим
    1. Александр Мальцев
      Александр Мальцев
      30.06.2021, 14:56
      Привет!
      Для создания такого меню достаточно добавить к элементу свойства «position: sticky» и «top: 0»:
      <nav class="navbar navbar-default" style="position: sticky; top: 0;">
        ...
      </nav>
      Ссылка на пример: b3-navbar-sticky
      1. Илья
        Илья
        30.06.2021, 21:00
        Спасибо, получилось супер! Даже проще, чем в примере, что скинул. Теперь возник вопрос с отметкой активной страницы. Чтобы не прописывать меню на каждой странице, то я его вывожу с помощью <?php include 'menu.php'; ?>, но при таком методе я выходит не могу ставить активным в меню нужный пункт. Есть ли какой-то метод, чтобы не копировать каждый раз меню на страницу с заменой идентификатора для обозначения страницы, на которой находишься?
        1. Александр Мальцев
          Александр Мальцев
          04.07.2021, 07:42
          Отлично! Добавить класс active к необходимому пункту меню можно как на сервере, так и на клиенте. На сервере нужно определить какую вы страницу генерируете и соответственно вставить active в нужное место. Если на сервере не хотите, то тогда можно с помощью JavaScript, например, так:
          $('.navbar').find('a').each(function() {
            if (location.href.indexOf(this.href) > -1) {
              $(this).parent().addClass('active');
            }
          });
          
          1. Илья
            Илья
            04.07.2021, 09:06
            Извиняюсь за глупый вопрос, а куда этот код вставить?) Вставил код ниже в файл mynavbar.js, но ничего не происходит, если к примеру перехожу на страницу контактов.

            (function(){
            $('.navbar').find('a').each(function() {
              if (location.href.indexOf(this.href) > -1) {
                $(this).parent().addClass('active');
              }
            });
            })();
            1. Александр Мальцев
              Александр Мальцев
              04.07.2021, 15:02
              Выведите значения в консоль и посмотрите:
              console.log('location.href = ' + location.href);
              $('.navbar').find('a').each(function() {
                console.log('this.href = ' + this.href);
                if (location.href.indexOf(this.href) > -1) {
                  $(this).parent().addClass('active');
                }
              });
              
              Пункт будет подсвечиваться, если «this.href» будет является частью «location.href». Если нужно по-другому, то необходимо дописать скрипт.
    2. Roman
      Roman
      23.03.2021, 07:31
      Здравствуйте! Пытаюсь делать все как описано, но не получается изменить фон активного пункта меню. И при отображении мобильной версии лезет какая то грязно-черная полоса. Где может быть ошибка? Спасибо!



      1. Александр Мальцев
        Александр Мальцев
        24.03.2021, 15:58
        Привет! Сделайте пример в какой-нибудь песочнице (JS Bin или др.), по картинке не определишь, где ошибка.
        1. Roman
          Roman
          06.04.2021, 07:02
          Спасибо! Уже разобрался. Мой косяк был. Недостаточно усвоил базовую теорию ), в частности вашу статью о базовой разметке бутстрапа. Все уже ОК.
      2. Alexey
        Alexey
        26.01.2021, 16:55
        Дополнение к первому вопросу.

        Подскажите как в навбаре сделать надпись динамической в зависимости от логина, под которым входит юзер и его роли, чтобы в навбаре слева выводился логин юзера и роль?

        itchief.ru/assets/uploadify/b/1/4/b146d64219c74b9b3ebea0d622cf49ba.png

        itchief.ru/assets/uploadify/e/1/d/e1da88afd53fbce59b2ddc57f1f679ed.png
        1. Александр Мальцев
          Александр Мальцев
          27.01.2021, 15:05
          Здравствуйте! Если на сервере, то вам нужно знать где это храниться или как это получить. После этого указать эту переменную вместо названия сайта.
          Например:
          <a class="navbar-brand" href="#"><?php echo $user;?></a>
          
          1. Alexey
            Alexey
            27.01.2021, 15:32
            Спасибо
        2. Alexey
          Alexey
          26.01.2021, 16:39
          Здравствуйте!
          Подскажите как в навбаре сделать надпись динамической в зависимости от логина, под которым входит юзер, чтобы в навбаре слева выводился логин юзера?
          1. Sergey
            Sergey
            08.02.2020, 13:17
            Здравствуйте, Александр. Подскажите с разделителями в меню навбар. Хочу установить разделитель между вкладками меню (фон вкладок — прозрачный, поэтому выделяется только ссылка).

            <nav role="navigation" class="navbar navbar-inverse navbar-fixid-top">
            
            	  				<div class="container"> <!-- 1 -->
            
            	  					<div class="navbar-header 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><!-- navbar-header -->
            
                				<div id="navbarCollapse" class="collapse navbar-collapse navbar-right">
            
                					<ul class="nav nav-pills">
                						<li class="active"><a href="#">Home</a></li>
                						<li class="divider">|</li>
                						<li><a href="#">Our service</a></li>
                						<li class="divider">|</li>
                						<li><a href="#">Gallery</a></li>
                						<li class="divider">|</li>
                						<li><a href="#">Contact</a></li>
                					</ul>
              				</div><!-- id navbarCollapse -->
                			</div> <!-- container/nav -->
                		</nav>
            
            В СSS задаю стиль
            .navbar.nav.divider {
            color: red;
            }

            РАЗДЕЛИТЕЛЬ НЕ РЕАГИРУЕТ (обращение к селектору не правильное либо свойство указанно не правильно либо Ваш вариант)
            Нужно не только ему цвет задать, но и размер сделать по высоте вкладок меню.
            Сейчас это выглядит так(((

            Возможно существует иной, лучший, способ достижения описанной цели?

            Спасибо
            1. Александр Мальцев
              Александр Мальцев
              08.02.2020, 14:55
              Здравствуйте!
              Можно не добавлять дополнительные элементы, а реализовать это с использованием CSS-свойства border-right или через псевдоэлементы.
              Пример, в котором показано как добавить вертикальные линии в качестве разделителей пунктов меню.
              1. Sergey
                Sergey
                08.02.2020, 16:44
                Александр, теперь у меня, в связи с этим, возникли новые вопросы!
                до использования вашего кода, выравнивая по центру меню на маленьких экранах задалось в медиазапросе:
                @media (min-width: 768px) 
                .nav-pills>li {
                		float: none;
                	}
                
                	.nav-pills {
                		text-align: center;
                	}
                
                код немного изменился, изменил и я медиазапрос:
                    @media (min-width: 767px) {
                .navbar-collapse li {
                        border-right: 1px solid #616161;
                      }
                
                .navbar-collapse li:last-child {
                        border-right: none;
                      }
                
                .navbar-nav>li> {
                		float: none;
                	}
                
                .navbar-nav 
                		text-align: center;
                	}
                
                Меню все равно прижато к левому краю.

                Спасибо!
                1. Sergey
                  Sergey
                  08.02.2020, 18:36
                  пошел к обратному — назад исправив свой документ и применил лишь медиазапрос Ваш! Все стало на свои места, как и предполагалось. На данном этапе — пробую создать копию по учебному материалу, но внося некоторые дополнения. Копия 1/1 уже готова и мне показалось, что я почти освоил верстку…
                  Очевидно, мне еще предстоит много чего узнать! Например, я cразу и не увидел разницу, но она есть:
                  @media (max-width: 767px) {
                  	.nav-pills>li {
                  		float: none;
                  	}
                  
                  	.nav-pills {
                  		text-align: center;
                  	}
                  
                  	.header h1 { 
                  	    font-size: 280%;
                  	    letter-spacing: 5px;
                  	}
                  
                  	.header {
                  		text-align: center;
                  	}
                  } 
                  
                   @media (min-width: 767px) {
                  .navbar-collapse li {
                          border-right: 1px solid #616161;
                        }
                  
                  .navbar-collapse li:last-child {
                          border-right: none;
                        }
                  }
                  
                  Спасибо, таким людям, как Вы!
                  1. Александр Мальцев
                    Александр Мальцев
                    09.02.2020, 16:02
                    Пожалуйста! Рад, что помог.
                2. Sergey
                  Sergey
                  08.02.2020, 15:18
                  Спасибо, буду разбираться далее!
              2. Oleksandr
                Oleksandr
                03.01.2020, 16:56
                Как сделать меню, чтобы в мобильной версии не было полосочки, только кнопка:
                как здесь, то-есть как вынести кнопку за переделы блока: getinstance.info/articles/css/responsive-menu/
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="#">Brand</a>
                </div>
                
                1. R
                  R
                  23.08.2018, 20:25
                  Александр, приветствую. Подскажите, пожалуйста, как вместо dropdown (или в самом элементе) сделать картинку? Естественно, с сохранением функций. Спасибо!
                  1. Vladimir
                    Vladimir
                    23.04.2018, 14:30
                    При загрузке сайта с телефона меню по умолчанию раскрыто. Как его скрыть, чтобы открывалось только при нажатии на иконке?
                    1. Александр Мальцев
                      Александр Мальцев
                      23.04.2018, 17:03
                      Удалить класс in у элемента navbar-collapse:
                      ...
                      <nav class="navbar-collapse collapse" id="navbar">
                      ...
                      </nav>
                      ...
                      
                      Добавить collapsed к элементу с классом navbar-toggle:
                      ...
                      <button class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" type="button">...</button>
                      ...
                      
                      1. Vladimir
                        Vladimir
                        23.04.2018, 17:26
                        Спасибо! И статья отличная!
                    2. Вадим
                      Вадим
                      18.01.2018, 22:24
                      Александр добрый вечер, подскажите как можно при нажатии (когда меню открыто) на:

                      <button type="button" data-toggle="collapse" data-target="#menu-top" aria-expanded="false" class="navbar-toggle collapsed"></button>
                      Добавлять дополнительный класс к:

                      <nav class="navbar navbar-default red"></nav>
                      А при закрытии убрать его!
                      1. Михаил
                        Михаил
                        27.01.2018, 20:25
                        $(document).ready(function(){
                          $(".collapse").on('show.bs.collapse', function(){
                            $('.navbar-default').addClass('red');
                          });
                          $(".collapse").on('hide.bs.collapse', function(){
                            $('.navbar-default').removeClass('red');
                          });
                        });
                      2. Архаил
                        Архаил
                        12.09.2017, 11:59
                        Александр, добрый день. Подскажите, как сделать чтобы на мобильной версии при адаптации, подменю- (dropdown-menu) выпадало плавно и плавно скрывалось.
                        1. Александр Мальцев
                          Александр Мальцев
                          13.09.2017, 16:12
                          Здравствуйте, Архаил!
                          Добавьте на страницу (после подключения js файла Bootstrap) следующий скрипт:
                          $(function(){
                              $('.dropdown').on('show.bs.dropdown', function(e){
                                  $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
                              });
                              $('.dropdown').on('hide.bs.dropdown', function(e){
                                  e.preventDefault();
                                  $(this).find('.dropdown-menu').first().stop(true, true).slideUp(400, function(){
                                      $('.dropdown').removeClass('open');
                                      $('.dropdown').find('.dropdown-toggle').attr('aria-expanded','false');
                                  });
                              });
                          });
                          
                          1. Архаил
                            Архаил
                            13.09.2017, 16:29
                            Добавил, но появился баг, при нажатии на разворачивании другого раздела, предыдущее выпадающее под-меню (class=«dropdown-menu») остается висеть поверх меню со стилем (display: block) не скрывается и так с каждым разделом, не отрабатывает скрытие.
                            1. Александр Мальцев
                              Александр Мальцев
                              14.09.2017, 14:42
                              Немного поправил.
                              Попробуйте так:
                              $(function(){
                                  $('.dropdown').on('show.bs.dropdown', function(e){
                                      $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
                                  });
                                  $('.dropdown').on('hide.bs.dropdown', function(e){
                                      e.preventDefault();
                              	var self = this;
                                      $(this).find('.dropdown-menu').first().stop(true, true).slideUp(400, function(){
                                          $(self).removeClass('open');
                                          $(self).find('.dropdown-toggle').attr('aria-expanded','false');
                                      });
                                  });
                              });
                              
                              1. Архаил
                                Архаил
                                14.09.2017, 14:58
                                Благодарю! сейчас все работает корректно!)
                        2. Максим Хализов
                          Максим Хализов
                          02.08.2017, 12:21
                          Добрый день, Александр! Всех благ в ваш дом! Подскажите пожалуйста по свойству border. Заказчик хочет чтобы у кнопок в виде рамки были только уголки, левый верхний и правый нижний углы. Остальное нужно скрыть. Так ещё и хочет чтобы линии от углов плавно переходили в прозрачность. А сами уголки имели свечение. Ни приложу ума как выполнить этот каприз( помогите пожалуйста.
                          1. Александр Мальцев
                            Александр Мальцев
                            03.08.2017, 16:40
                            Здравствуйте!
                            Для этого необходимо использовать абсолютное позиционирование.
                            В navbar элементам li по умолчанию уже назначено относительное позиционирование. Ваша задача — это добавлять элементы в li, устанавливать им абсолютное позиционирование, позиционировать их с помощью CSS-свойств left, top, right, bottom и что-то с помощью них выводить.
                            Например, для того чтобы вывести треугольники понадобится 4 элемента. С помощью псевдоэлементов ::after и ::before можно создать только 2. Поэтому этот вариант в данном случае не подойдёт, придётся добавлять элементы в li.
                            HTML-код:
                            <ul class="nav navbar-nav">
                              <li class="active"><a href="#">Ссылка 1<span class="sr-only">(текущая)</span></a>
                                <span class="top-left"></span>
                                <span class="top-left-offset"></span>
                                <span class="bottom-right"></span>
                                <span class="bottom-right-offset"></span>
                              </li>
                              <!-- ... -->
                            
                            CSS-код:
                            .navbar-nav>.active>a,
                            .navbar-nav>.active>a:focus,
                            .navbar-nav>.active>a:hover {
                              background-color: #f8f8f8 !important;
                            }
                            .top-left {
                              position: absolute;
                              left: 3px; top: 3px;
                              border: 10px solid transparent;
                              border-left: 10px solid red;
                              border-top: 10px solid red;
                            }
                            .top-left-offset {
                              position: absolute;
                              left: 5px; top: 5px;
                              border: 10px solid transparent;
                              border-left: 10px solid #f8f8f8;
                              border-top: 10px solid #f8f8f8;
                            }
                            .bottom-right {
                              position: absolute;
                              right: 3px; bottom: 3px;
                              border: 10px solid transparent;
                              border-right: 10px solid red;
                              border-bottom: 10px solid red;
                            }
                            .bottom-right-offset {
                              position: absolute;
                              right: 5px; bottom: 5px;
                              border: 10px solid transparent;
                              border-right: 10px solid #f8f8f8;
                              border-bottom: 10px solid #f8f8f8;
                            }
                            
                            Так будет выделяться активный пункт меню:
                            Bootstrap Navbar - активный пункт меню выделяется с помощью стрелочекДобавление другого оформления будет осуществляться аналогичным способом.

                            Другой способ это осуществить можно с помощью canvas и JavaScript.
                          2. Влад
                            Влад
                            18.12.2016, 11:32
                            Здравствуйте, Александр! Может я что то не понимаю но у меня
                            <nav id="site-navigation" class="main-navigation" role="navigation">
                            а navbar я нигде не вижу, а хочу сделать меню с левой стороны вертикально согласно дизайну
                            1. Александр Мальцев
                              Александр Мальцев
                              24.12.2016, 01:45
                              Здравствуйте, Влад. Если вы хотите сделать вертикальное меню на основании классов Bootstrap, то тогда используйте следующую конструкцию:
                              <ul class="nav nav-pills nav-stacked">
                                <li class="active"><a href="#">Пункт 1</a></li>
                                <li><a href="#">Пункт 2</a></li>
                                <li><a href="#">Пункт 3</a></li>
                              </ul>
                              
                            2. Stas
                              Stas
                              14.11.2016, 13:09
                              а как сделать чтобы меню при нажатии на кнопку выпадало вверх, на примере стандартного bootstrap? тоесть в обычном состоянии оно выпадает вниз и сдвигает весь контент, а как сделать чтоб оно открывалось вверх и тоже сдвигался контент как на картинке
                              1. Александр Мальцев
                                Александр Мальцев
                                16.11.2016, 12:52
                                Очень просто.
                                Необходимо блок с классом 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>
                                
                              2. Сергей
                                Сергей
                                08.11.2016, 06:00
                                Привет! Подскажите, пожалуйста, при переходе на страницу не подсвечивается фон активной кнопки меню. Получается, что если я напишу код #ссылка, то фон будет всегда подсвечен возле этой одной кнопки. Но так как меню у меня заключено в <?php include 'menu.php'; ?>, то он получается одинаковым для всех страничек. Получается, что всегда подсвечена только одна ссылка. А мне бы сделать так, чтобы пользователь видел подсвеченный фон той кнопки, на которую он нажал при переходе. Надеюсь, понятно рассказал. Подскажите, пожалуйста, буду благодарен!!!
                                1. Александр Мальцев
                                  Александр Мальцев
                                  08.11.2016, 12:19
                                  Если вы хотите сделать это на стороне клиента, то необходимо написать сценарий 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. Сергей
                                    Сергей
                                    08.11.2016, 18:29
                                    Вы Гений!!!
                                2. ds
                                  ds
                                  22.08.2016, 06:59
                                  Добрый день.
                                  Подскажите пожалуйста как настроить меню так чтобы такая кнопка как на мобильной версии была и с компьютера выпадающее меню как на скриншоте.

                                  Заранее спасибо
                                  1. Александр Мальцев
                                    Александр Мальцев
                                    24.08.2016, 13:08
                                    Как сделать такое меню можно посмотреть, перейдя по следующей ссылке (jsfiddle.net):
                                    Меню с кнопкой dropdown
                                  2. Invar
                                    Invar
                                    15.08.2016, 12:32
                                    Здравствуйте! Подскажите как сделать фон меню прозрачным? Устанавливал opacity для всего меню, только и текст ссылок получается прозрачным. А надо что б только фон. За ним видна картинка шапки сайта. Спасибо! И за урок тоже!!!
                                    1. Василий
                                      Василий
                                      15.08.2016, 18:07
                                      в своей таблице написать:
                                      .navbar {
                                          background-color: rgba(255, 255, 255, 0);
                                      }
                                    2. Василий
                                      Василий
                                      12.08.2016, 12:53
                                      Подскажите пожалуйста как можно прикрепить navbar-brand справа к кнопке свёрнутого меню collapse только на маленьких разрешениях? Как скрыть — понятно — через .hidden-xs и .hidden-sm а как сместить вправо?
                                      Вот как-то так:

                                      Заранее спасибо.
                                      1. Александр Мальцев
                                        Александр Мальцев
                                        14.08.2016, 09:45
                                        Добавить в свой файл CSS:
                                        .navbar-brand {
                                          float: right !important;
                                        }
                                        
                                        1. Василий
                                          Василий
                                          14.08.2016, 17:36
                                          Туплю. Спасибо. Я так понимаю, для того, чтобы данный костыль работал только на мобильных версиях, надо использовать медиазапросы? А стандартными средствами бутстрапа не получится?
                                          1. Василий
                                            Василий
                                            15.08.2016, 08:50
                                            Сам нашёл: класс pull-right
                                            Спасибо за наводку
                                      2. Александр
                                        Александр
                                        06.08.2016, 23:09
                                        После перехода по пункту меню — меню не закрывается и загораживает пол-экрана.

                                        Куда копать?
                                        1. Александр Мальцев
                                          Александр Мальцев
                                          08.08.2016, 13:15
                                          Попробуйте добавить на страницу следующий скрипт:
                                          <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. Мария
                                          Мария
                                          03.08.2016, 13:00
                                          Здравствуйте, статья супер. Но у меня почему-то в стили бутстрапа не стилизируються в CSS. Никакой реакции. В чем может быть проблема?
                                          1. Александр Мальцев
                                            Александр Мальцев
                                            04.08.2016, 12:10
                                            Здравствуйте, спасибо.
                                            Представленные стили необходимо вставлять в свой файл CSS, который должен быть подключен после основного файла bootstrap.min.css. Или если его нету, то создать и подключить его после bootstrap css с помощью тега link.
                                            Или можете прямо вставить на страницу. Для этого создайте в разделе head после bootstrap css элемент style и вставьте туда код css.
                                            <style>
                                              ...
                                            </style>
                                            
                                          2. Женя Епифальцев
                                            Женя Епифальцев
                                            23.07.2016, 19:51
                                            У вас в примере есть картинка после меню с эффектом паралакса(фоновое изображение) Не подскажете, как менять ее размер? Спасибо!
                                            1. Александр Мальцев
                                              Александр Мальцев
                                              24.07.2016, 09:05
                                              В примере высота элемента, содержащее фоновое изображение, определяется в зависимости от содержимого, которое в него помещено и внутренних полей до этого содержимого (вверху — 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. Женя Епифальцев
                                                Женя Епифальцев
                                                24.07.2016, 09:07
                                                Огромное вам спасибо!
                                            2. Кирилл Ерофеев
                                              Кирилл Ерофеев
                                              03.07.2016, 09:58
                                              Суть проблемы: при разрешении экрана 675 пикселей и меньше появляется отступ, который хотелось бы убрать. Меню .navbar-static-top. Ну и картинки для примера
                                              itchief.ru/assets/uploadify/6/f/3/6f3c4c58bbb6e2dc7d39c59b51fd00c5.png
                                              itchief.ru/assets/uploadify/2/2/b/22b89d3b47841aaa3287cb6692604c14.png
                                              1. Александр Мальцев
                                                Александр Мальцев
                                                04.07.2016, 12:37
                                                По одним картинкам сложно определить. Желательно привести страницу на jsfiddle.net или подобном сервисе.
                                              2. Михаил
                                                Михаил
                                                29.06.2016, 12:46
                                                Здравствуйте. Помогите пожалуйста в очередной раз. При уменьшении монитора до смартфона появляется белая полоса сбоку, т.е все блоки сжимаются, а меню не до конца, оставляя под собой полосу. Может я чё в стилях перемудрил?
                                                itchief.ru/assets/uploadify/9/2/3/923532ff220b620bd71c020ff60851f0.png
                                                1. Vladimir
                                                  Vladimir
                                                  08.07.2016, 21:08
                                                  В классе .row пропишите margin-left: 0; и margin-right: 0;
                                                  1. Александр Мальцев
                                                    Александр Мальцев
                                                    30.06.2016, 11:35
                                                    Здравствуйте. Проверьте, может отступы padding или margin. В таких случаях желательно изучать страницу с помощью панели разработчика (Ctrl+Shift+I). В этой панели есть вкладка Elements. А в ней вкладка Styles. На этой вкладке (Styles) отображаются стили, которые применены к выбранному элементу. Выбор элемента осуществляется либо визуально на странице, либо в дереве, которое расположено во вкладке Elements. Используя эти инструменты попробуйте изучить то, что Вы там перемудрили.
                                                    1. Михаил
                                                      Михаил
                                                      29.06.2016, 13:48
                                                      И ещё вопрос. Возможно ли расположить список в открывающемся меню не по левую сторону, а по правую, или по середине?
                                                      1. Михаил
                                                        Михаил
                                                        29.06.2016, 15:17
                                                        По второму вопросу разобрался. Помог обычный text-align для списка ( это так, может кому тоже будет нужно). Ну а с первым никак, help…
                                                    2. Алексей
                                                      Алексей
                                                      07.06.2016, 22:35
                                                      Здравствуйте!

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

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

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

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

                                                      В чем может быть проблема?
                                                      1. Александр Мальцев
                                                        Александр Мальцев
                                                        08.06.2016, 13:02
                                                        Если Вы хотите отключить схлопывание меню, то лучше этого сделать через собственную сборку, например на странице customize.
                                                        Для этого Вам необходимо будет установить переменной@grid-float-breakpoint значение 0.
                                                        Посмотрите этот комментарий:
                                                        itchief.ru/lessons/bootstrap-3/38-bootstrap-3-navigation-menu#comment-2034
                                                      2. Александр
                                                        Александр
                                                        01.06.2016, 14:47
                                                        А вот, все… Решил проблему
                                                        Вот так прописал
                                                        .navbar .dropdown-menu li {
                                                          background-color: #fff;
                                                        }
                                                        1. Александр
                                                          Александр
                                                          01.06.2016, 14:39
                                                          А вот у меня такой вопрос.
                                                          При нормальном просмотре на компе выпадающий список белого цвета,
                                                          если к примеру меню красное. А при адаптивном виде выпадающий список
                                                          такого же цвета как и меню, тоже красный.
                                                          Подскажите, какие классы отвечают за фоновый цвет выпадающего списка
                                                          при адаптивном просмотре?
                                                          1. Константин
                                                            Константин
                                                            23.05.2016, 13:26
                                                            Отличная статья! Автору +… Возможно еще смогу получить ответ на свой вопрос по Collapse Accordion group list: заметил очень неудобную штуку, когда так называемая гармошка расположена внизу страницы и выпадает вниз за область просмотра, в итоге нужно скролить страницу вниз, бывает наоборот, когда скролом пропустил гармошку вверх области просмотра, а потом решил её расскрыть — она выпадает наверх:(
                                                            Возможно ли как то задавать направление для этой самой гармошки и можно ли как-то закрепить область просмотра гармошки, чтобы выпадающие списки оставались в поле зрения (в области просмотра, без необходимости скролить страницу)???
                                                            Заранее спасибо
                                                            1. Александр Мальцев
                                                              Александр Мальцев
                                                              24.05.2016, 11:28
                                                              Спасибо.
                                                              Самый простой способ сделать так, чтобы гармошка открывалась вверх — это поменять блоки контента и заголовка местами:
                                                              <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
                                                                Kos
                                                                26.05.2016, 07:43
                                                                Увы, самый простой способ не подошел, он буквально меняет местами заголовок и содержание, при таком варианте во время просмотра создается вппечатление что контент нижней вкладки относится к закрытому (.collapse) заголовку, который расположен выше(((
                                                                1. Александр Мальцев
                                                                  Александр Мальцев
                                                                  27.05.2016, 11:34
                                                                  Попробуйте тогда 2 вариант.
                                                            2. Артём
                                                              Артём
                                                              15.05.2016, 19:49
                                                              Подскажите как можно убрать полосу прокрутки которая появляется при раскрытии кнопки на маленьких экранах?
                                                              1. Александр Мальцев
                                                                Александр Мальцев
                                                                16.05.2016, 14:00
                                                                Что за полоса прокрутки и как она возникает? Опишите подробнее.
                                                              2. Юрий
                                                                Юрий
                                                                10.05.2016, 08:43
                                                                Здравствуйте, Александр!
                                                                Меню по умолчанию может сворачиваться в кнопку, саму кнопку можно настроить под себя или заменить на рисунок. А как сделать, чтобы вместо кнопки подключался слайдер, например, типа elastislide?
                                                                1. Иван
                                                                  Иван
                                                                  06.05.2016, 17:17
                                                                  Здравствуйте.
                                                                  Пожалуйста подскажите
                                                                  Столкнулся с проблемой преобразования navbar'a в открывающую его кнопку при ширине 767 и меньше px. Как убрать эту фичу?
                                                                  1. Александр Мальцев
                                                                    Александр Мальцев
                                                                    07.05.2016, 07:39
                                                                    Наиболее просто это осуществить с помощью изменения переменной LESS @grid-float-breakpoint на значение 0, например, на странице getbootstrap.com/customize/.
                                                                    Вот ссылка на сборку Bootstrap, у которой переменная @grid-float-breakpoint имеет значение 0:
                                                                    getbootstrap.com/customize/?id=37773b5afa0006199c9c7af096003264

                                                                  2. Борис
                                                                    Борис
                                                                    06.05.2016, 14:30
                                                                    Разобрался все просто достаточно добавлять высоту только если навбар не изменился.

                                                                    @media (min-width: 769px) {
                                                                    .mynavbar {
                                                                    height: 105px;
                                                                    }
                                                                    }
                                                                    1. Борис
                                                                      Борис
                                                                      04.05.2016, 15:19
                                                                      У меня проблема скомпилил себе navbar на странице getbootstrap.com/customize/ высота 100.
                                                                      Добавляю бордер navbar'у border-bottom: 5px solid #dddddd;.
                                                                      Получаю следующее высота navbar увеличивается на 5px. а мне надо сделать как тут (http://openaddon.com/joomla/vt_family/index.php) то есть кнопочка и нижний боредер соприкасаются.
                                                                      Если указать жестко высоту height: 100px;. То мобильная версия самой собой не работает(((
                                                                      Подскажите как сделать, замучился.
                                                                      1. Антон
                                                                        Антон
                                                                        02.05.2016, 16:49
                                                                        Спасибо большое автору! Хорошая статья!
                                                                        1. Михаил
                                                                          Михаил
                                                                          28.04.2016, 22:06
                                                                          Здравствуйте. Почему то при уменьшении размера экрана меню фиксируется с небольшим опозданием, и чем меньше экран, тем больше опоздание. Нельзя ли изменить скрипт чтобы было точнее вычисление при уменьшении экрана, или может в свойствах надо что дописать?
                                                                          1. Александр Мальцев
                                                                            Александр Мальцев
                                                                            01.05.2016, 13:48
                                                                            Не знаю что у Вас тормозит. Время за которое элемент переходит из одного состояние в другое составляет 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. Михаил
                                                                              Михаил
                                                                              02.05.2016, 07:47
                                                                              Разобрался. Всё со скриптом хорошо, просто после каждого уменьшения экрана надо перезагрузить страницу(ну а иначе как скрипт сработает?). Казалось бы логично, а сколько нервов попортило :) Большое спасибо за все ваши ответы
                                                                          2. Dmitry
                                                                            Dmitry
                                                                            21.04.2016, 17:46
                                                                            Александр, только начал вникать в Bootstrap). Подскажите, а как не меняя особо поставку (а например, в своей дополнит. CSS), сделать чтобы сверху фиксированного меню типа navbar-fixed-top была небольшой высоты строка, куда размещу типа header (логотип, название сайта, телефон...)?
                                                                            1. Александр Мальцев
                                                                              Александр Мальцев
                                                                              23.04.2016, 06:18
                                                                              Это делается в 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))
                                                                                    }
                                                                                  }
                                                                                });
                                                                              });
                                                                              
                                                                              1. Dmitry
                                                                                Dmitry
                                                                                21.04.2016, 19:51
                                                                                вот пример, что хочется… _http://p120.createme.tk/
                                                                                шапка над фиксированным меню, при прокрутке шапка может исчезать…
                                                                              2. Дмитрий
                                                                                Дмитрий
                                                                                15.04.2016, 12:15
                                                                                Подскажите пожалуйста, что в bootstrap отвечает за толщину навбара. Можно ли его сделать уже?
                                                                                1. Александр Мальцев
                                                                                  Александр Мальцев
                                                                                  23.04.2016, 06:29
                                                                                  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. Роман
                                                                                  Роман
                                                                                  12.04.2016, 21:56
                                                                                  как сделать на размере lg margin-left:100px;
                                                                                  а на md margin-left:50px;
                                                                                  1. Александр Мальцев
                                                                                    Александр Мальцев
                                                                                    13.04.2016, 16:34
                                                                                    Например, изменить у элементов, имеющих класс 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. Jelena
                                                                                    Jelena
                                                                                    26.02.2016, 13:03
                                                                                    Подскажите, пожалуйста, как поменять цвет у класса icon-bar в Toggle navigation при hover?
                                                                                    Скажем я хочу, чтоб полоски «гамбургера» были красными при наведении курсора, и когда кнопка в состоянии «active».
                                                                                    1. Александр Мальцев
                                                                                      Александр Мальцев
                                                                                      01.03.2016, 15:50
                                                                                      Здравствуйте, можете использовать следующий скрипт:
                                                                                      $(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
                                                                                        Jelena
                                                                                        05.03.2016, 23:01
                                                                                        Большое спасибо за ответ. Решение, и правда, впечатляет. Это ж не лень вам было время тратить :)
                                                                                        Обязательно попробую и отпишу.
                                                                                        1. Александр Мальцев
                                                                                          Александр Мальцев
                                                                                          06.03.2016, 12:34
                                                                                          Набросал то его сразу. А вот оптимизировать его как-то или записать более элегантно не получилось :) Может кто-то из посетителей предложит более простой и интересный вариант.
                                                                                    2. Святослав
                                                                                      Святослав
                                                                                      25.02.2016, 13:23
                                                                                      Здравствуйте, скажите а как сделать свои размеры навигационной панели, мне нужно ширина 960px высота 100px? И все кнопки в левую сторону а лого в правую
                                                                                      1. Александр Мальцев
                                                                                        Александр Мальцев
                                                                                        25.02.2016, 16:46
                                                                                        Высоту 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. Virtas
                                                                                        Virtas
                                                                                        30.01.2016, 17:25
                                                                                        Подключил bootstrap все работает меню работает блоки и все такое только дефолтное а вот стили не сторонние например ваши подгружаются только с применением !important
                                                                                        1. Александр Мальцев
                                                                                          Александр Мальцев
                                                                                          31.01.2016, 10:02
                                                                                          Их необходимо располагать или подключать после строчки, в которой Вы подключаете bootstrap.min.css.
                                                                                        2. Ануш
                                                                                          Ануш
                                                                                          16.01.2016, 17:34
                                                                                          Здравствуйте. Как сделать 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. Александр Мальцев
                                                                                            Александр Мальцев
                                                                                            17.01.2016, 10:29
                                                                                            Здравствуйте.
                                                                                            Добавьте добавьте в конце вашего 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. Ануш
                                                                                              Ануш
                                                                                              17.01.2016, 10:34
                                                                                              Спасибо ) НО появляется полоса прокрутки. Что не так?
                                                                                          2. Андрей
                                                                                            Андрей
                                                                                            31.12.2015, 05:05
                                                                                            спасибо. С новым годом! не могу разобраться как в выпадаюшем верхнем меню подсветку при наведении курсора сделать. у меня вордпресс с бутстрап шаблоном. цсс поправляю как могу, но результата нет. верхнее меню подсвечивается без проблем, а выпадающее никак. в стилях собакаа порылась. если знаете, помогите.
                                                                                            1. Александр Мальцев
                                                                                              Александр Мальцев
                                                                                              31.12.2015, 10:38
                                                                                              Андрей, с новым годом!
                                                                                              Ответ на данный вопрос смотри в этом комментарии. А именно в (2) Стили для dropdown-menu:
                                                                                              Если не будут применяться, то добавьте !important:
                                                                                              .navbar .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
                                                                                                color: #262626 !important;
                                                                                                background-color: #f5f5f5 !important;
                                                                                              }
                                                                                              
                                                                                            2. Aleksandr Ustinov
                                                                                              Aleksandr Ustinov
                                                                                              27.11.2015, 23:09
                                                                                              все сделал! нашел дублера в css
                                                                                              1. Aleksandr Ustinov
                                                                                                Aleksandr Ustinov
                                                                                                25.11.2015, 13:15
                                                                                                Код работает но что то не то, мне нужно что бы меню «полосочки» появлялось лишь тогда когда когда я захочу(с определенного момента) а именно «На устройствах имеющих средний размер экрана (md)» а оно появляется только лишь на «На устройствах имеющих маленький размер экрана (sm)» а если я ставлю разные цифры в начале ((1) Измените 1000 на необходимое Вам значение и вставьте стили в Ваш файл CSS:) то меню просто меняет центрирование с правого на левое на данной ширене экрана
                                                                                                1. Александр Мальцев
                                                                                                  Александр Мальцев
                                                                                                  26.11.2015, 13:56
                                                                                                  Должно работать.
                                                                                                  Посмотри на http://jsfiddle.net/itchief/agq7wq1g/.
                                                                                                  Или что-то другое хочешь?
                                                                                                  1. Aleksandr Ustinov
                                                                                                    Aleksandr Ustinov
                                                                                                    27.11.2015, 22:27
                                                                                                    самое главное там работает! а у меня на сайте нет! Сворачивает в меню только на 750
                                                                                                  2. Aleksandr Ustinov
                                                                                                    Aleksandr Ustinov
                                                                                                    25.11.2015, 14:06
                                                                                                    _test.theone1.ru это сайт который делаю
                                                                                                  3. Aleksandr Ustinov
                                                                                                    Aleksandr Ustinov
                                                                                                    24.11.2015, 00:01
                                                                                                    Доброго времени суток! Подскажите пожалуйста
                                                                                                    (1)как сделать так что бы Toggle navigation появлялась не на маленькх а например на среднем экране.И еще вопрос
                                                                                                    (2)как переопределить стили для выпадающего меню Toggle navigation
                                                                                                    Спасибо!
                                                                                                    1. Александр Мальцев
                                                                                                      Александр Мальцев
                                                                                                      24.11.2015, 15:40
                                                                                                      Здравствуйте, Александр.
                                                                                                      (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
                                                                                                        Aleksandr Ustinov
                                                                                                        25.11.2015, 11:04
                                                                                                        спасибо
                                                                                                    2. Alex
                                                                                                      Alex
                                                                                                      16.11.2015, 23:12
                                                                                                      У кого то была проблемы с прыгающей нав панелью фиксированной при быстром скролинге?
                                                                                                      1. Александр Мальцев
                                                                                                        Александр Мальцев
                                                                                                        17.11.2015, 13:28
                                                                                                        Проверьте Ваши стили…
                                                                                                        Такой проблемы у компонента нет.
                                                                                                      2. Yaroslav
                                                                                                        Yaroslav
                                                                                                        13.11.2015, 13:36
                                                                                                        Здравствуйте! А как реализовать меню чтобы вместо navbar-header была картинка? Я пробовал, но макет при этом ломается
                                                                                                        1. Александр Мальцев
                                                                                                          Александр Мальцев
                                                                                                          14.11.2015, 02:10
                                                                                                          Здравствуйте.
                                                                                                          По умолчанию данная область (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. Андрей
                                                                                                            Андрей
                                                                                                            07.04.2016, 08:43
                                                                                                            Попытался поставить логотип в navbar-brend, но он почему-то съезжал вниз, пока не указал выравнивание align=«left».
                                                                                                            Но при установке картинки 40px текст бренда становится не по середине полосы navbar. Можно его выровнять по центральной линии?
                                                                                                            И еще вопрос по navbar — выпадающее меню при широком экране всегда белое, или его цвет тоже можно настроить?
                                                                                                            1. Александр Мальцев
                                                                                                              Александр Мальцев
                                                                                                              07.04.2016, 14:53
                                                                                                              Может какие-то Ваши стили это изменяют. Проверьте на чистом Bootstrap без использование своих стилей.
                                                                                                              Выпадающее меню — это dropdown-menu. Попробуй его настроить с помощью изменения стилей, представлено в этом комментарии:
                                                                                                              itchief.ru/lessons/bootstrap-3/119-bootstrap-3-customize-the-navbar#comment-902
                                                                                                              1. Андрей
                                                                                                                Андрей
                                                                                                                08.04.2016, 15:44
                                                                                                                На чистом Bootstrap на черной стандартной теме выпадающее меню на полном экране тоже белое. На вашем сайте тоже выпадающее белое. А в мобильном виде все подразделы окрашены. Возможно так и должно быть, но есть сомнения.
                                                                                                                1. Александр Мальцев
                                                                                                                  Александр Мальцев
                                                                                                                  10.04.2016, 09:52
                                                                                                                  Всё зависит от Вашего желания. Можно настроить как угодно.
                                                                                                                  Настроить dropdown можно по приведённой ссылке выше. Просто надо попробовать.
                                                                                                                  _https://jsfiddle.net/itchief/84oeut2a/
                                                                                                          2. Dmitriy
                                                                                                            Dmitriy
                                                                                                            13.11.2015, 22:38
                                                                                                            Немного дополню вопрос выше: картинка в navbar-header больше стандартной высоты navbar-header, если переопределить высоту на фиксированную, то ломается адаптивность
                                                                                                            И мой вопрос: в пунктах меню есть картинка и текст, как убрать картинку, когда меню сворачивается в кнопку на маленьких экранах
                                                                                                            ПС спасибо автору за уроки!
                                                                                                            1. Александр Мальцев
                                                                                                              Александр Мальцев
                                                                                                              14.11.2015, 02:44
                                                                                                              Я так и не совсем понял, Вы хотите переопределить 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;
                                                                                                                }
                                                                                                              }
                                                                                                              
                                                                                                          3. Сергей
                                                                                                            Сергей
                                                                                                            29.10.2015, 18:10
                                                                                                            Здравствуйте!
                                                                                                            подскажите, как изменить начало фиксации панели при скролл.Например при scroll 50 или scroll 100.До этих значений чтобы было статическое меню.
                                                                                                            Спасибо
                                                                                                            1. Александр Мальцев
                                                                                                              Александр Мальцев
                                                                                                              30.10.2015, 12:29
                                                                                                              Здравствуйте, Сергей!
                                                                                                              Это делается с помощью плагина 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. Алексей
                                                                                                              Алексей
                                                                                                              17.10.2015, 18:27
                                                                                                              @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. Алексей
                                                                                                                Алексей
                                                                                                                14.10.2015, 19:01
                                                                                                                Александр Мальцев
                                                                                                                Спасибо большое опробую данный способ
                                                                                                                Вот только гадаю как добавить скрипт, куда и как вставить новичек все таки )
                                                                                                                // DROPDOWN CLASS DEFINITION
                                                                                                                  // =========================
                                                                                                                
                                                                                                                  var backdrop = '.dropdown-backdrop'
                                                                                                                  var toggle   = '[data-toggle="dropdown"]'
                                                                                                                  var Dropdown = function (element) {
                                                                                                                    $(element).on('click.bs.dropdown', this.toggle)
                                                                                                                  }
                                                                                                                Нашел интересную надпись отвечающую за раскрытие меню возможно можно его как-то подашаминть
                                                                                                                1. Влади
                                                                                                                  Влади
                                                                                                                  07.10.2015, 16:14
                                                                                                                  Огромная благодарность автору данного проекта за наглядные примеры, доступность описания + потраченное время. Желаю всех благ и развития ресурса.
                                                                                                                  1. Алексей
                                                                                                                    Алексей
                                                                                                                    04.10.2015, 12:33
                                                                                                                    Здравствуйте, недавно занялся создание сайтов с использованием бутстрапа+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. Александр Мальцев
                                                                                                                      Александр Мальцев
                                                                                                                      05.10.2015, 13:00
                                                                                                                      Алексей, т.к. данная функциональность на мобильных устройствах и планшетах не нужна, то предлагаю вышеприведённый 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. Артем
                                                                                                                      Артем
                                                                                                                      13.08.2015, 14:59
                                                                                                                      фоновое изображение, которое придаёт веб-страницы некоторый
                                                                                                                      Мне кажется правильно веб-странице, у вас опечатка видимо. Первый абзац в Навигационное меню и фоновое изображение
                                                                                                                      1. Александр Мальцев
                                                                                                                        Александр Мальцев
                                                                                                                        14.08.2015, 16:50
                                                                                                                        Спасибо, Артём. Поправил.
                                                                                                                      2. DmBor
                                                                                                                        DmBor
                                                                                                                        24.07.2015, 18:15
                                                                                                                        Привет всем!
                                                                                                                        Насчет меню — понятно,
                                                                                                                        а вот как оформить пункт меню под свои нужды??
                                                                                                                        1. Александр Мальцев
                                                                                                                          Александр Мальцев
                                                                                                                          26.07.2015, 17:17
                                                                                                                          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. Andrey964
                                                                                                                          Andrey964
                                                                                                                          21.07.2015, 08:33
                                                                                                                          Добрый день. Еще вопрос. Как установить, чтобы подсветка пункта подменю была на всю ширину блока. Сейчас выдается с отступами слева и справа
                                                                                                                          1. Александр Мальцев
                                                                                                                            Александр Мальцев
                                                                                                                            21.07.2015, 14:49
                                                                                                                            Она и так по умолчанию занимает всю ширину блока. Скорее всего, на данное меню оказали влияние Ваши собственные стили. Их необходимо проверить.
                                                                                                                            Не знаю, как там у Вас реализовано, но всё делается просто с помощью изменения значения переменной LESS @dropdown-link-hover-bg в файле variables.less.

                                                                                                                            Ну, или на крайний случай можно переопределить стили Bootstrap 3:
                                                                                                                            nav.dropdown-menu > li > a:hover {
                                                                                                                              background-color: blue;
                                                                                                                            }
                                                                                                                            
                                                                                                                            1. Andrey964
                                                                                                                              Andrey964
                                                                                                                              21.07.2015, 18:17
                                                                                                                              использовал шаблон helix3. в файле variables.less. нет этой переменной. Может еще где посмотреть?
                                                                                                                              1. Александр Мальцев
                                                                                                                                Александр Мальцев
                                                                                                                                22.07.2015, 15:47
                                                                                                                                Меню этого шаблона никакого отношения к стандартному меню 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. Andrey964
                                                                                                                            Andrey964
                                                                                                                            21.07.2015, 00:33
                                                                                                                            Разобрался. Это сделано я так понимаю чтобы не было разрыва фона между пунктом главного меню и выпадающего подменю. Когда оба имеют одинаковый фон проблемы нет
                                                                                                                            1. Andrey964
                                                                                                                              Andrey964
                                                                                                                              20.07.2015, 22:35
                                                                                                                              1. Andrey964
                                                                                                                                Andrey964
                                                                                                                                19.07.2015, 15:22
                                                                                                                                Добрый день! Активный пункт выпадающего меню по размерам вылезает за границы nav-bar. как исправить? Спасибо
                                                                                                                                1. Александр Мальцев
                                                                                                                                  Александр Мальцев
                                                                                                                                  20.07.2015, 15:15
                                                                                                                                  Добрый день!
                                                                                                                                  Приведите Ваш код на jsfiddle.net.
                                                                                                                                  1. Andrey964
                                                                                                                                    Andrey964
                                                                                                                                    20.07.2015, 22:33
                                                                                                                                    .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. Егор
                                                                                                                                  Егор
                                                                                                                                  10.07.2015, 03:32
                                                                                                                                  Еще раз спасибо. У меня сайт на 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. Александр Мальцев
                                                                                                                                    Александр Мальцев
                                                                                                                                    10.07.2015, 17:00
                                                                                                                                    Спасибо Егор за Ваш отзыв.
                                                                                                                                    Обязательно сделаю подборки интересных сниппетов.
                                                                                                                                  2. Егор
                                                                                                                                    Егор
                                                                                                                                    08.06.2015, 17:24
                                                                                                                                    Все. Поставил сам. Спасибо. Хорошая статья.
                                                                                                                                    1. Егор
                                                                                                                                      Егор
                                                                                                                                      08.06.2015, 17:17
                                                                                                                                      Здравствуйте, а как сделать, что-бы меню не выходило за рамки .container и не растягивалось на всю ширину экрана?
                                                                                                                                      1. MrJack
                                                                                                                                        MrJack
                                                                                                                                        08.04.2015, 21:42
                                                                                                                                        Отличная статья, спсибо за труды
                                                                                                                                        1. Ди
                                                                                                                                          Ди
                                                                                                                                          24.02.2015, 05:43
                                                                                                                                          Подскажите как переместить зафиксированное навигационное меню скажем на 100px вниз?
                                                                                                                                          1. Александр Мальцев
                                                                                                                                            Александр Мальцев
                                                                                                                                            24.02.2015, 12:05
                                                                                                                                            Добрый день, Ди.
                                                                                                                                            Можно воспользоваться следующим CSS кодом:
                                                                                                                                            navbar-fixed-top {
                                                                                                                                            top: 100px;
                                                                                                                                            }
                                                                                                                                            
                                                                                                                                          Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.