Как изменить переключение меню в сворачиваемое по разрешению?

Question

[Евгений]

Заметил что менюшка превращается в сворачиваемое меню при разрешении меньше 768 px. Я так понимаю это сток бутстрапа.

Но так как у меня достаточно пунктов меню ещё в диапазоне от 768 до 1200 она выглядит убого и меню в 2 этажа. Следовательно нужно сделать так чтобы меню сворачивалось раньше. Уже при 1200.

Как это можно отследить и изменить?

Answer 1

[Сергей Герасимов]

В классе navbar-expand указан модификатор {-sm|-md|-lg|-xl}, соответственно при выборе модификатора меню будет схлопываться раньше или позже

Comments

[Евгений]

Я этот класс нашёл в самом бутстрапе. Только где именно выбирается модификатор "схлопывания"?
Cамо меню у меня

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                  <ul class="nav navbar-nav">

[Сергей Герасимов]

Евгений, у обертки над меню, например тег nav или div с классом navbar. Ему и добавить 2ым классом navbar-expand-lg

[Евгений]

Сергей Герасимов, Cделал я вот так

<div class="collapse navbar-collapse-expand-lg" id="bs-example-navbar-collapse-1">
                  <ul class="nav navbar-nav">
                      <li class="active">
                          <a href="index.html">Главная</a>
                      </li>

Теперь когда разрешение больше 768 пунктов меню нет, а меньше 768 кнопочка от сворачивания есть . Причём при любых размерах больше 768 нет пунктов меню

[Евгений]

Вот вся менюшка

Вся менюшка

<nav class="navbar navbar-default">
          <div class="container">
              <!-- Brand and toggle get grouped for better mobile display -->
              <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                          aria-expanded="false">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                  </button>
              </div>
              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                  <ul class="nav navbar-nav">
                      <li class="active">
                          <a href="index.html">Главная</a>
                      </li>
                      <li class="dropdown">
                          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Услуги
                              <span class="caret"></span></a>
                          <ul class="dropdown-menu">
                              <li class="divider"></li>
                              <li><a href="#">Гинекология</a></li>
                              <li class="divider"></li>
                              <li><a href="#">Лаборатория</a></li>
                              <li class="divider"></li>
                              <li><a href="#">Узи</a></li>
                              <li class="divider"></li>
                              <li><a href="#">Офтальмология</a></li>
                              <li class="divider"></li>
                              <li><a href="#">Рентгенология</a></li>
                              <li class="divider"></li>
                              <li><a href="#">Оториноларингология</a></li>
                              <li class="divider"></li>
                              <li><a href="#">Хирургия</a></li>
                              <li class="divider"></li>
                              <li><a href="#">Вакцинация</a></li>
                              <li class="divider"></li>
                              <li><a href="#">Физиотерапия</a></li>
                              <li class="divider"></li>
                              <li><a href="#">Массаж</a></li>
                              <li class="divider"></li>
                              <li><a href="#">Водительская комиссия</a></li>
                              <li class="divider"></li>
                              <li><a href="#">Неврология</a></li>
                              <li class="divider"></li>
                              <li><a href="#">Стоматология</a></li>
                              <li class="divider"></li>
                              <li><a href="#">Профосмотры</a></li>
                              <li class="divider"></li>

                          </ul>
                      </li>


                      <li>
                          <a href="blog.html">Новости</a>
                      </li>
                      <li>
                          <a href="gallery.html">Галерея</a>
                      </li>
                      <li>
                          <a href="team.html">Врачи</a>
                      </li>
                      <li>
                          <a href="vacancies.html">Вакансии</a>
                      </li>
                      <li>
                          <a href="about.html">Руководство</a>
                      </li>
                      <li>
                          <a href="#">ЗОЖ</a>
                      </li>
                      <li>
                          <a href="contact.html">Контакты</a>
                      </li>
                      
                  </ul>
              </div>
              <!-- /.navbar-collapse -->
          </div>
          <!-- /.container-fluid -->
      </nav>

[Евгений]

Может этого класса нет в 3 bootstrap...)

[Сергей Герасимов]

Евгений, ну то, что 3ий только в последнем сообщении стало видно...

В нем нет такого модификатора, но можно указать @grid-float-breakpoint на нужную ширину, если у вас sass, конечно, подробнее https://getbootstrap.com/docs/3.3/components/#navbar

Или сгенерировать в кастомайзере с нужным брейкпоинтом https://getbootstrap.com/docs/3.3/customize/

[Евгений]

Сергей Герасимов, Cпасибо, настроил. Работает. Я бы использовал 4 bs, но не тот у меня скил в фронте чтобы переписать шаблон с 3 bs на 4 bs

[Сергей Герасимов]

Евгений, можно открыть миграцию и посмотреть какие классы на что переписали, какие убрали и т.п. getbootstrap.com/docs/4.1/migration
Всё же у 4ки больше возможностей

[Евгений]

Сергей Герасимов, Гораздо больше возможностей , но я не верстальщик и верстку знаю на базовом уровне. Пока нет желаний во фронт лезть , так как у меня большие проблемы с веб-дизайном и графикой. Пока апаю скил php и фреймворка Yii2. Поэтому с моими навыками шаблон не переделать с bs3 на bs4.

Я искал шаблоны на BS4, но все были убогие. Только 1 нашёл у любимой конторы, но они в 2к18 продолжают клепать шаблоны на BS3