分离折叠和未折叠的bootstrap 4导航栏菜单

Question

在构建bootstrap 4导航栏菜单时，我在单击切换按钮后尝试仅设置响应式菜单的样式;但是，我注意到没有崩溃和崩溃的UL只有1个css选择器。

我正在使用wordpress，所以我的案例中的UL是boostrap walker nav，但我创建了一个Codepen来演示我遇到的静态html问题。

我需要一个单独的UL或UL作为容器外部，当点击切换按钮时，我可以相应地设置它（在我的情况下是黄色bg），这是我能够获得的唯一方式close是在容器div之外创建另一个。

当切换菜单处于活动状态但仅在<700px左右时，此功能可用。当它没有粗糙的时候会有另一个导航。

我可以隐藏容器外的菜单，直到用js激活切换菜单或者有更好的方法吗？

在研究解决方案时，我遇到了类似的问题Bootstrap 4 collapsed navbar background color，但它没有工作

/* change navbar background on collapse */
@media (max-width: 768px) {
  nav.navbar {
    background: lightgray;
  }
}

我觉得这应该是以前出现过的，但我无法在任何地方找到解决方案。我希望我的问题足够简明扼要。

Answer 1

似乎找到了我的问题的答案。我使用媒体查询仅在我需要的宽度处定位导航栏并添加样式。我找到了一个非常酷的解决方案，可以完美地获得我需要的全宽bg颜色，而不是分开div。 https://css-tricks.com/full-width-containers-limited-width-parents/