Как сделать чтобы не все элементы адаптивного меню скрывались на малых разрешениях в Bootstrap?

163

12 декабря 2018, 20:00

Всем привет. В общем ситуация такая, нужно чтобы на разрешении меньше 992px меню скрывалось за гамбургер, но не все меню, телефон должен остаться до разрешения 768px, меньше 768px, телефон должен скрыться за гамбургером. Как это реализовать в бутстрапе? Для понимания прикладываю скриншоты из макета. Так должно быть от 768px до 992px: Так должно быть от 0 до 768px:

<nav class="navbar navbar-expand-lg navbar-light"> 
              <div class="logo"> 
                <a class="navbar-brand" href="#"> 
                  <img class="logo" src="img/logo.png" alt="Логотип"> 
                </a> 
              </div> 
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> 
          <span class="navbar-toggler-icon"></span> 
        </button> 
        <div class="collapse navbar-collapse" id="navbarText"> 
          <ul class="navbar-nav mr-auto"> 
            <li class="nav-item main_menu_list_item"> 
              <a class="nav-link" href="#">Главная</a> 
            </li> 
            <li class="nav-item main_menu_list_item"> 
              <a class="nav-link" href="#">О компании</a> 
            </li> 
            <li class="nav-item main_menu_list_item"> 
              <a class="nav-link" href="#">Недвижимость и переезд</a> 
            </li> 
            <li class="nav-item main_menu_list_item"> 
              <a class="nav-link" href="#">Контакты</a> 
            </li> 
          </ul> 
          <div class="navbar-text d-flex"> 
            <div class="icon"> 
              <img class="modal1" src="img/phone.png" alt="icon"> 
            </div> 
            <div class="phone"> 
              +7 (495) 12-321-345<br> 
              +7 (495) 12-321-345 
            </div> 
          </div> 
        </div> 
      </nav>