Адаптивный navbar

Question

У меня есть два навбара: десктоп и мобайл. С мобайл нет проблем, а вот с декстоп проблемы.

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

header .navbar {
  background-color: rgba(6, 152, 209, 0.03);
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
}

header .navbar .navbar-brand {
  margin-left: 1rem;
}

header .navbar .navbar-brand img {
  width: 85px;
  height: auto;
}

header .navbar .collapse.navbar-collapse .navbar-nav .nav-button {
  white-space: nowrap;
  margin: .5rem;
}

header .navbar .collapse.navbar-collapse .navbar-nav .nav-button:hover {
  color: white;
  background-color: #0698d1;
  border-radius: .25rem;
}

header .navbar .collapse.navbar-collapse .navbar-nav .nav-button:hover .nav-text {
  color: white;
}

header .navbar .collapse.navbar-collapse .navbar-nav .nav-button .nav-text {
  color: #0698d1;
}

header .navbar .collapse.navbar-collapse .navbar-nav .nav-button .nav-text .fas.fa-caret-down {
  margin-left: 5px;
  -webkit-transition: .2s;
  -o-transition: .2s;
  transition: .2s;
}

header .navbar .collapse.navbar-collapse .navbar-nav .dropdown .dropdown-menu {
  margin: 0;
  border: 1px solid rgba(6, 152, 209, 0.3);
  display: none;
  opacity: 0;
  -webkit-transition: .13s;
  -o-transition: .13s;
  transition: .13s;
}

header .navbar .collapse.navbar-collapse .navbar-nav .dropdown .dropdown-menu .dropdown-item {
  color: #0698d1;
}

header .navbar .collapse.navbar-collapse .navbar-nav .dropdown .dropdown-menu .dropdown-item:hover {
  color: white;
  background-color: #0698d1;
}

header .navbar .collapse.navbar-collapse .navbar-nav .dropdown:hover .fas.fa-caret-down {
  -webkit-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

header .navbar .collapse.navbar-collapse .navbar-nav .dropdown:hover .dropdown-menu,
header .navbar .collapse.navbar-collapse .navbar-nav .dropdown-menu:hover .dropdown-menu {
  display: block;
  opacity: 1;
}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-md hidden-sm">
  <a class="navbar-brand" href="/" title="Стоматология">
    <img src="" alt="Денталюкс">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
  <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item nav-button">
        <a class="nav-link nav-text" href="/">Главная</a>
      </li>
      <li class="nav-item nav-button dropdown">
        <a class="nav-link nav-text" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Услуги<i class="fas fa-caret-down"></i>
                    </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="/pages/directions/therapeuticdentistry.php">Терапия</a>
          <a class="dropdown-item" href="/pages/directions/surgicaldentistry.php">Хирургия</a>
          <a class="dropdown-item" href="/pages/directions/orthopedics.php">Ортопедия</a>
          <a class="dropdown-item" href="/pages/directions/periodontology.php">Пародонтология</a>
          <a class="dropdown-item" href="/pages/directions/orthodontics.php">Ортодонтия</a>
          <a class="dropdown-item" href="/pages/directions/aestheticdentistry.php">Эстетическая стоматология</a>
          <a class="dropdown-item" href="/pages/directions/">Полный прейскурант</a>
        </div>
      </li>
      <li class="nav-item nav-button">
        <a class="nav-link nav-text" href="/pages/staff.php">Специалисты</a>
      </li>
      <li class="nav-item nav-button">
        <a class="nav-link nav-text" href="/pages/stocks.php">Акции</a>
      </li>
      <li class="nav-item nav-button">
        <a class="nav-link nav-text" href="/pages/reviews.php">Отзывы</a>
      </li>
      <li class="nav-item nav-button">
        <a class="nav-link nav-text" href="/pages/patients.php">Пациентам</a>
      </li>
      <li class="nav-item nav-button">
        <a class="nav-link nav-text" href="/pages/contacts.php">Контакты</a>
      </li>
      <li class="nav-item nav-button">
        <a class="nav-link nav-text" href="/pages/contacts.php">Версия для слабовидящих <i class="fas fa-eye"></i></a>
      </li>
    </ul>
  </div>
</nav>

БЛОГ НА HUSL

Адаптивный navbar

Ответы (0 шт):