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

Question

在构建bootstrap 4导航栏菜单时，我尝试在单击切换按钮后仅设置响应式菜单的样式；但是，我注意到对于未折叠和折叠的UL，只有一个css选择器。

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

当切换按钮被点击时，我需要一个单独的UL或容器外部的UL，这样我就可以相应地设置它的样式(在我的例子中是黄色的bg)，并且我能够接近的唯一方法是在容器div之外创建另一个。

当切换菜单处于活动状态但仅在<700px左右时，此功能才起作用。当它粗略地展开时，就会有另一个导航。

我是否可以将菜单隐藏在容器之外，直到使用js切换菜单处于活动状态，或者有更好的方法这样做吗？

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

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

我觉得这是应该在以前的某个时候提出的，但我在任何地方都找不到解决方案。我希望我的问题足够简洁，可以给出答案。

Answer 1

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