I have an example MegaMenu in Bootstrap 5.
The menu is getting positioned left side. Due to the CSS
@media (min-width: 992px)
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: absolute;
}
I'm looking to get the megamenu to be constrained to the bounds of the container element in the center. My example megamenu is here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Load Bootstrap 5 from CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Load Bootstrap 5 JavaScript from CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap 5 MegaMenu Position Issue</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow">
<div class="container">
<a class="navbar-brand" href="#">Bootstrap</a>
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-content">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-content">
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<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>
<!-- Mega Menu -->
<li class="nav-item dropdown dropdown-mega position-static " sytle="">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Megamenu</a>
<div class="dropdown-menu shadow container">
<div class="mega-content px-4">
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-4 col-md-3 py-4">
<h5>No additional JS</h5>
<div class="list-group">
<a class="list-group-item" href="#">Accomodations</a>
<a class="list-group-item" href="#">Terms & Conditions</a>
<a class="list-group-item" href="#">Privacy</a>
</div>
</div>
<div class="col-12 col-sm-4 col-md-3 py-4">
<h5>No Additional CSS</h5>
<div class="card">
<img src="https://images.unsplash.com/photo-1509599589979-3b5a15d2816e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&ixid=MnwzNzg0fDB8MXxzZWFyY2h8NDR8fGZvcmVzdHxlbnwwfDB8fHwxNjM0OTkxMjA3&ixlib=rb-1.2.1&q=80&w=1080&h=768" class="img-fluid" alt="image">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-12 col-sm-4 col-md-3 py-4">
<h5>Lot of Pages</h5>
<p>Lorem ipsum dolo sit achmet muhamed borlan de irtka.
</p></div>
<div class="col-12 col-sm-12 col-md-3 py-4">
<h5>Accomodation</h5>
<div class="list-group">
<a class="list-group-item" href="#">Accomodations</a>
<a class="list-group-item" href="#">Terms & Conditions</a>
<a class="list-group-item" href="#">Privacy</a>
</div>
</div>
</div>
</div>
</div>
</div>
</ul>
<form class="d-flex ms-auto">
<div class="input-group">
<input class="form-control border-0 mr-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-primary border-0" type="submit">Search</button>
</div>
</form>
</div>
</div>
</nav>
<!-- Content -->
<div class="container">
<h1>Hello, world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>The menu is getting absolutely positioned so that is why is getting positioned on the left . When I change the menu positioning to static it jumps inside the nav itself.
Best I can do at the moment is set the left:auto
@media (min-width: 992px)
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: absolute;
left: auto;
}
Which is setting the megamenu on the right of the opening megamenu link
