分離摺疊和未摺疊的引導程序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個導航欄菜單

回答

相關問題