I have following navbar, in which I have a mega menu dropdown. I would like this dropdown 'products' to take the full width of the screen (since I would like to add more items in the width)
I tried with following modifications in css, but this doesn't give the expect result. On large screen widths it doesn't take the total width, and on mobile it takes more than the screenwidth.
.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
<div class="dropdown-menu dropdown-menu-right " aria-labelledby="productsDropdown">
<div class="dropdown-divider"></div>
<div class="d-md-flex align-items-start justify-content-start">
<div>
<div class="dropdown-header" style="font-size: 1.00rem;"><b>Main head 1</b></div>
<img class="mx-auto d-block" src="demo.jpg"></img>
<a class="dropdown-item" style="font-size: 0.80rem;line-height: 0.5;" href="#">item 1.1</a>
<a class="dropdown-item" style="font-size: 0.80rem;line-height: 0.5;" href="#">item 1.2</a>
<a class="dropdown-item" style="font-size: 0.80rem;line-height: 0.5;" href="#">item 1.3</a>
<a class="dropdown-item" style="font-size: 0.80rem;line-height: 0.5;" href="#">item 1.4</a>
<a class="dropdown-item" style="font-size: 0.80rem;line-height: 0.5;" href="#">item 1.5</a>
<a class="dropdown-item" style="font-size: 0.80rem;line-height: 0.5;" href="#">item 1.6</a>
<a class="dropdown-item" style="font-size: 0.80rem;line-height: 0.5;" href="">item 1.7</a>
<div class="dropdown-header" style="font-size: 1.00rem;"><b>Main Head 2</b></div>
<img class="mx-auto d-block" src="demo2.jpg"></img>
<a class="dropdown-item" style="font-size: 0.80rem;line-height: 0.5;" href="#">item 2.1</a>
<a class="dropdown-item" style="font-size: 0.80rem;line-height: 0.5;" href="#">item 2.2</a>
<a class="dropdown-item" style="font-size: 0.80rem;line-height: 0.5;" href="#">item 2.3</a>
<a class="dropdown-item" style="font-size: 0.80rem;line-height: 0.5;" href="#">item 2.4</a>
<a class="dropdown-item" style="font-size: 0.80rem;line-height: 0.5;" href="#">item 2.5</a>
<a class="dropdown-item" style="font-size: 0.80rem;line-height: 0.5;" href="#">item 2.6</a>
<a class="dropdown-item" style="font-size: 0.80rem;line-height: 0.5;" href="#">ietm 2.7</a>
</div>
<div>
<div class="dropdown-header" style="font-size: 1.00rem;"><b>Main head 3</b></div>
<img class="mx-auto d-block" src="demo3.jpg"></img>
<a class="dropdown-item" style="font-size: 0.80rem;line-height: 0.5;" href="#">item 3.1</a>
<a class="dropdown-item" style="font-size: 0.80rem;line-height: 0.5;" href="#">item 3.2</a>
<a class="dropdown-item" style="font-size: 0.80rem;line-height: 0.5;" href="#">item 3.3</a>
<a class="dropdown-item" style="font-size: 0.80rem;line-height: 0.5;" href="#">item 3.4</a>
</div>
<div>
<div class="dropdown-header" style="font-size: 1.00rem;"><b>Main head 4</b></div>
<a class="dropdown-item" style="font-size: 0.80rem;line-height: 0.5;" href="#">item 4.1</a>
<a class="dropdown-item" style="font-size: 0.80rem;line-height: 0.5;" href="#">item 4.2</a>
</div>
<div>
<div class="dropdown-header" style="font-size: 1.00rem;"><b>Main head5</b></div>
<a class="dropdown-item" style="font-size: 0.80rem;line-height: 0.5;" href="#">item 5.1</a>
<a class="dropdown-item" style="font-size: 0.80rem;line-height: 0.5;" href="#">item 5.2</a>
<a class="dropdown-item" style="font-size: 0.80rem;line-height: 0.5;" href="#">item 5.3</a>
<a class="dropdown-item" style="font-size: 0.80rem;line-height: 0.5;" href="#">item 5.4</a>
</div>
</div>
</div>
</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>
The problem is that the container above your dropdown options does not have 100% of the width of the window. In this way, when using absolute coordinates, the menu is positioned from that element. If you give it a negative value you could adjust it to the window but you would have the problem in the responsive one.
I had a similar case and I chose to customize the Boostrap menu and use the offcanvas component that you can make appear at the top.
Here is a link that explains the component:
Bootstrap Offcanvas