My navbar currently has a mega menu dropdown for 'products', but I want this dropdown to take up the entire width of the screen to accommodate more items. However, my CSS modifications did not produce the desired result. On large screens, it fails to take up the full width, while on mobile it extends beyond the screen width.
.dropdown-menu {
--bs-dropdown-min-width: 55rem;
/*white 'background' part*/
width: 100%;
}
.navbar-nav li .dropdown-menu {
left: -295px;
/*whole menu shifts to the left*/
}<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5d50504b4c4b4b59f4e4c4c6c0c5c2c3c08f929d92">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98faf7f7ecebeceaf9e8d8adb6abb6a9">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-light bg-light navbar-expand-lg" id="myNavbar">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a href="#"><img alt='logo' src="LOGO 2022 RGB.png" style="height:65px;width:65px"></img>
</a>
<br>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav ml-auto nav-fill">
<li class="nav-item px-4 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products</a>
<!-- Dropdown content here -->
</li>
<li class="nav-item px-4">
<a href="#" class="nav-link">Documentation <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item px-4">
<a href="#" class="nav-link">About us</a>
</li>
<li class="nav-item px-4">
<a href="#" class="nav-link">Blog</a>
</li>
<li class="nav-item px-4">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
</div>
</nav>