Before encountering this issue, I was struggling with making the navbar scroll on smaller screens when expanded. I found a helpful solution on Stack Overflow: responsive fixed-top navbar when expanded fills up screen, hides some of the nav-links, and does not scroll
After implementing the answer from that question, I managed to make the navbar scroll. However, a new problem arose. When clicking on a navbar link, the dropdown menu that appeared would remain within the navbar container and wouldn't scroll along with the navbar.
I have included an image to illustrate this issue: https://i.sstatic.net/lofON.png
Here is the CSS code I used to enable scrolling for the collapsed navbar:
.fixed-top .navbar-collapse {
max-height: calc(100vh - 4.5em);
overflow-y: auto;
}
Everything works fine when the navbar is collapsed, but on larger screens, the dropdown menu remains within the container. How can I make the dropdown menu appear outside the navbar container?
You can view a JSFiddle demonstrating this issue here: https://jsfiddle.net/suhaib47/7b58o0d3/3/
Please note that the viewport width should be wide enough to display the full navbar. Click on the OLE dropdown and then scroll down to view the dropdown menu.
When I attempt to show the dropdown menu outside the container, it becomes unscrollable on smaller screens. Conversely, when the menu is scrollable, it remains within the nav container.
How can I achieve the goal of having the dropdown menu appear outside the navbar container while maintaining scrollability for the responsive navbar on smaller screens?
I came across a similar question on Stack Overflow, but the solution provided did not solve my issue: The navbar dropdown menu does not beyond the container