While constructing a bootstrap 4 navbar menu, I am facing a challenge with styling only the responsive menu after clicking the toggle button. The issue lies in having just one CSS selector for both the uncollapsed and collapsed UL.
Working with WordPress, my UL is based on the Bootstrap walker nav. However, I have created a Codepen to illustrate the problem using static HTML.
I require a separate UL or need the UL to be positioned outside the container when the toggle button is clicked so that I can style it differently (e.g., yellow background color). The closest workaround I have found is creating an additional UL outside the container div.
This approach functions when the toggle menu is active but only at widths less than 700px. When expanded, there exists another navigation menu.
Is it possible to hide the menu located outside the container until the toggle menu is active using JavaScript? Alternatively, is there a better way to achieve this?
In my quest for a solution, I came across a similar question about changing the background color of a collapsed navbar in Bootstrap 4 (Bootstrap 4 collapsed navbar background color), but unfortunately, it did not work.
/* Change navbar background on collapse */
@media (max-width: 768px) {
nav.navbar {
background: lightgray;
}
}
I believe this is a common dilemma faced by many developers, yet a solution seems challenging to come by. Hopefully, my question is precise enough to elicit a helpful response.