分离折叠和未折叠的引导程序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;
}
}
我觉得这是应该的某个时候才想出了什么,但我不能在任何地方找到一个解决方案。我希望我的问题足够简洁,可以得到答案。
答
似乎找到了我的问题的答案。我使用媒体查询时,只有在我需要的宽度上添加样式时,才会定位到导航栏。我没有分开div,而是找到了一个非常酷的解决方案,它能够完美地获得我需要的全宽bg颜色。 https://css-tricks.com/full-width-containers-limited-width-parents/