I recently completed a website using Bootstrap, and everything seems to be working well on desktop. However, I am facing an issue when loading the site on mobile devices. The menu is not scrolling properly when opened, making it difficult to view all the options in the dropdown. Instead of the menu scrolling, it's actually the background that is moving.
After searching for solutions online, I came across some CSS code that was supposed to fix this problem:
.navbar-nav {
height: 150vh; // This will fix the collapse animation
}
.navbar-collapse.in {
overflow-x: hidden;
padding-right: 17px; // Hide scroll bar, but still allow scrolling
}
@media (min-width: 768px) {
.navbar-nav {
height: auto;
}
}Despite applying this code, the menu remains unscrollable and the issue persists. Can anyone offer insight into what might be causing this problem? You can check out the live URL of my website here. Any help would be greatly appreciated.
Thank you!