分离折叠和未折叠的引导程序4个导航栏菜单

当您构建引导程序4的导航栏菜单时，我试图在单击切换按钮后仅设置响应菜单;然而，我注意到只有1个css选择器用于未折叠和折叠的UL。分离折叠和未折叠的引导程序4个导航栏菜单

我正在使用wordpress，所以在我的例子中的UL是boostrap沃克导航，但我创建了一个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; 
    } 
}

我觉得这是应该的某个时候才想出了什么，但我不能在任何地方找到一个解决方案。我希望我的问题足够简洁，可以得到答案。

来源

2017-11-10 ng_07

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

来源

2017-11-11 04:03:03

分离折叠和未折叠的引导程序4个导航栏菜单

回答

相关问题