Trying to position the "Big Dropdown" menu directly below the corresponding nav item has been challenging. Despite setting a max-width for the menu, achieving proper alignment has proven difficult. I'm looking for a responsive solution that is clean and doesn't require making numerous adjustments.
The desired location for the dropdowns is indicated by the green box in the image below. Currently, the dropdowns are incorrectly positioned. Ideally, adding more nav items should automatically adjust the placement of each dropdown under its respective nav item.
https://i.sstatic.net/RIXQd.png
HTML
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button">Big Dropdown</a>
<ul class="dropdown-menu megamenu midmenu ">
<div class="row">
<li class="col-md-6">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="col-md-6">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
</div>
</ul>
</li>CSS
nav.main .megamenu {
padding: 20px;
position: absolute;
top: auto;
left: 0;
right: 0;
max-width: 1500px;
width: 100%;
margin: 0 auto;
}
nav.main .midmenu {
position: absolute;
padding: 20px;
float: left;
top: auto;
left: auto;
right: auto;
max-width: 650px;
width: 100%;
margin: 0 auto;
}Codepen - Check out the "Big Dropdown" section
https://codepen.io/GH5ST/pen/GGgWPK