Bootstrap 4 заставляет родительский контейнер-жидкость включать расширенное раскрывающееся меню

Question

Есть ли способ получить родительский div ".primaryNav", показанный в примере с красным фоном, чтобы включить мое горизонтальное выпадающее меню в представлениях MD в XL, как это происходит в представлении для мобильных устройств?

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

Цель состоит в том, чтобы заставить .primaryNav div расти и автоматически включать вспомогательную навигацию, нажимая вниз по основной области содержимого

#topNav {
  letter-spacing: .06rem;
}

#topNav a.nav-link {
  padding: 0.05rem 0.5rem;
  color: white;
  font-weight: 300;
  font-size: 0.75rem;
}

#topNav a.nav-link:hover {
  text-decoration: underline;
}

#topNav a.nav-link.wpLink {
  font-weight: 800;
  font-size: .9rem;
}

.primaryNav {
  background-color: red;
}

#mainNav .mainSearch .form-control {
  border-left: 0;
}

#mainNav .input-group-text {
  background-color: white;
  border-right: 0;
  padding-right: 0;
}

@media (min-width: 576px) {
  #mainNav {
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 800;
  }
  #mainNav .nav-link {
    min-height: 65px;
  }
}

@media (min-width: 768px) {
  #mainNav {
    color: #000;
    font-weight: 800;
  }
  #mainNav .nav-link,
  #mainNav .nav-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  #mainNav,
  #mainNav .collapse,
  #mainNav .nav-link {
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
  #mainNav .navbar-nav {
    -ms-flex-pack: distribute;
        justify-content: space-around;
    width: 100%;
  }
  #mainNav .nav-link span {
    -ms-flex-item-align: center;
        align-self: center;
  }
  #mainNav .nav-link:active,
  #mainNav .nav-link:focus,
  #mainNav .nav-link:hover {
    color: black;
    border-bottom: 3px solid black;
  }
  #mainNav .active .nav-link {
    border-bottom: 3px solid #0075C9;
  }
  #mainNav .dropdown {
    position: static;
  }
  #mainNav .dropdown-menu {
    display: none;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    border-top: 1px solid grey;
    background: white;
  }
  #mainNav .dropdown-menu.in,
  #mainNav .active .dropdown-menu,
  #mainNav .dropdown:hover .dropdown-menu {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  #mainNav .dropdown-item {
    padding: 1rem 2rem;
    width: auto;
  }
  #mainNav .dropdown-item:hover,
  #mainNav .dropdown-item:focus,
  #mainNav .dropdown-item.active,
  #mainNav .dropdown-item:active {
    color: #000;
    text-decoration: none;
    background-color: #F2F2F2;
  }
}

@media (min-width: 1200px) {
  #mainNav {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}

Answer 1

Если вы хотите, чтобы ваше горизонтальное меню было свернуто в точках останова MD на XL, как в мобильном устройстве, вы можете использовать класс .navbar-expand-*.

Итак, замените navbar-expand-md на navbar-expand-xl в #mainNav элементе.

<nav id="mainNav" class="navbar navbar-expand-xl navbar-light p-0">

Answer 2

Вы пробовали

<nav id="topNav" class="navbar navbar-expand-xs navbar-dark text-white px-0 justify-content-lg-end">

Это должно сработать, сохраняя меню бургера, это то, чего вы пытаетесь достичь? Я не смог найти div с классом primaryNav.