bootstrap 5 navbar collapse div height not working - css

Question

I am using bootstrap5 navbar.In the navbar there is dropdown menu link.It works but the problem is that on 320*480 screen size the dropdown collapses but can't scroll or access the menu items inside the dropdown.Can anyone help me to resolve this issue.Thanks for the help in advance.My code:https://codepen.io/ANANTHUC/full/RwjvVKe
$(function () {
$(".dropdown-menu a.dropdown-toggle").on("click", function (e) {
if (!$(this).next().hasClass("show")) {
$(this).parents(".dropdown-menu").first().find(".show").removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass("show");
$(this)
.parents("li.nav-item.dropdown.show")
.on("hidden.bs.dropdown", function (e) {
$(".dropdown-submenu .show").removeClass("show");
});
return false;
});
$(".firstLevel").on("click", function (e) {
$(this).toggleClass("dropdown-Opened");
var sublevel_Dropdown = $(".firstLevel").next("ul").find(".subLevel");
if (sublevel_Dropdown.hasClass("dropdown-Opened")) {
$(sublevel_Dropdown).removeClass("dropdown-Opened");
$(sublevel_Dropdown).next('.dropdown-menu').removeClass("show")
}
if ($(".firstLevel").not(this).hasClass("dropdown-Opened")) {
$(".firstLevel").not(this).removeClass("dropdown-Opened");
//alert("class added");
}
});
$(".subLevel").on("click", function (e) {
$(this).toggleClass("dropdown-Opened");
});
var main__nestedDropdown = $(".subLevel").parent("li").parent("ul").prev("a.subLevel");
$(main__nestedDropdown).on("click", function (e) {
var child__nestedDropdown = main__nestedDropdown.next("ul").find("a.subLevel");
// alert("class added");
if (child__nestedDropdown.hasClass("dropdown-Opened")) {
$(child__nestedDropdown).removeClass("dropdown-Opened");
}
});
});
.menu-area {
background: #563d7c;
}
.dropdown-menu {
padding: 0;
margin: 0;
border: 0 solid transition !important;
border: 0 solid rgba(0, 0, 0, 0.15);
border-radius: 0;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.mainmenu a,
.navbar-default .navbar-nav > li > a,
.mainmenu ul li a,
.navbar-expand-lg .navbar-nav .nav-link {
color: #fff !important;
font-size: 16px;
text-transform: capitalize;
padding: 16px 15px;
font-family: "Roboto", sans-serif;
display: block !important;
}
.mainmenu .active a,
.mainmenu .active a:focus,
.mainmenu .active a:hover,
.mainmenu li a:hover,
.mainmenu li a:focus,
.navbar-default .navbar-nav > .show > a,
.navbar-default .navbar-nav > .show > a:focus,
.navbar-default .navbar-nav > .show > a:hover {
color: #fff;
}
/*==========Sub Menu=v==========*/
#media screen and (min-width: 992px) {
.mainmenu .collapse ul > li:hover > a {
background: #d61a5e;
}
.mainmenu .collapse ul ul > li:hover > a,
.navbar-default .navbar-nav .show .dropdown-menu > li > a:focus,
.navbar-default .navbar-nav .show .dropdown-menu > li > a:hover {
background: #d61a5e;
}
.mainmenu .collapse ul ul ul > li:hover > a {
background: #4caf50;
}
}
.mainmenu .collapse ul ul,
.mainmenu .collapse ul ul.dropdown-menu {
background: #1565c0;
}
.mainmenu .collapse ul ul ul,
.mainmenu .collapse ul ul ul.dropdown-menu {
background: #1e88e5;
}
.mainmenu .collapse ul ul ul ul,
.mainmenu .collapse ul ul ul ul.dropdown-menu {
background: #64b5f6;
}
/******************************Drop-down menu work on hover**********************************/
.mainmenu {
background: none;
border: 0 solid;
margin: 0;
padding: 0;
min-height: 20px;
width: 100%;
}
#media only screen and (min-width: 992px) {
.mainmenu .collapse ul li:hover > ul {
display: block;
}
.mainmenu .collapse ul ul {
position: absolute;
top: 100%;
left: 0;
min-width: 250px;
display: none;
}
/*******/
.mainmenu .collapse ul ul li {
position: relative;
}
.mainmenu .collapse ul ul li:hover > ul {
display: block;
}
.mainmenu .collapse ul ul ul {
position: absolute;
top: 0;
left: 100%;
min-width: 250px;
display: none;
}
/*******/
.mainmenu .collapse ul ul ul li {
position: relative;
}
.mainmenu .collapse ul ul ul li:hover ul {
display: block;
}
.mainmenu .collapse ul ul ul ul {
position: absolute;
top: 0;
left: -100%;
min-width: 250px;
display: none;
z-index: 1;
}
}
#media only screen and (max-width: 991px) {
.navbar-nav .show .dropdown-menu .dropdown-menu > li > a {
padding: 16px 15px 16px 35px;
}
.navbar-nav .show .dropdown-menu .dropdown-menu .dropdown-menu > li > a {
padding: 16px 15px 16px 45px;
}
.navbar-nav .dropdown .dropdown-toggle::after {
content: "+" !important;
font-size: 20px;
vertical-align: 0;
top: 8px;
border: 1px solid #fff;
right: 40px;
width: 32px;
height: 32px;
text-align: center;
position: absolute;
}
.navbar-nav .dropdown .dropdown-Opened::after {
content: "-" !important;
}
div#navbarSupportedContent {
position: absolute;
width: 100%;
z-index: 1;
top: 56px;
left: 0;
background: #0062cc;
}
/*Slide from left
.navbar-collapse {
position: fixed;
top: 56px;
left: 0;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
width: 75%;
background-color: #1e88e5;
height: 100%;
}
.navbar-collapse.collapsing {
left: -75%;
transition: height 0s ease;
}
.navbar-collapse.show {
left: 0;
transition: left 300ms ease-in-out;
}
.navbar-toggler.collapsed ~ .navbar-collapse {
transition: left 500ms ease-in-out;
}
*/
}
header {
position: fixed;
width: 100%;
z-index: 2;
}
#banner {
background: url("../img/banner.png") no-repeat;
background-size: cover;
height: 600px;
}
#banner h1 {
color: #fff;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<header id="menu_area" class="menu-area">
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light mainmenu">
<div class="container-fluid">
<div class="logo">
<a class="navbar-brand" href="index.html">
LOGO
</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-lg-auto customNav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle firstLevel" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Main Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li class="dropdown">
<a class="dropdown-toggle subLevel" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sub Dropdown1</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="dropdown">
<a class="dropdown-toggle subLevel" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Sub Dropdown2</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle firstLevel " href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Main Dropdown2
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</header>
<main>
<section id="banner">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-12">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae sit dignissimos totam dolore corporis! </h1>
</div>
</div>
</section>
</main>

Answer 1

Update following style in css.
div#navbarSupportedContent {
position: absolute;
width: 100%;
z-index: 1;
top: 56px;
left: 0;
background: #0062cc;
overflow: hidden;
overflow-y: auto;
max-height: calc(100vh - 56px);
}

Answer 2

In bootstrap 5 there is a CSS class navbar-nav-scroll to handle the scroll behaviour. Try this in your code:
<ul class="navbar-nav ms-lg-auto customNav navbar-nav-scroll">
also, you can adjust the scroll length by using style="--bs-scroll-height: 100px;", so it will be like this
<ul class="navbar-nav ms-lg-auto customNav navbar-nav-scroll" style="--bs-scroll-height: 100px;">
reference at bootstrap doc