Trying to center the mega menu in Bootstrap4 led me to this:
I attempted this approach initially:
<nav class="navbar navbar-light bg-light navbar-expand-lg sticky-top" 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>
<div class="collapse navbar-collapse" id="mainNav">
...
After consulting the Bootstrap documentation here, I realized a div container was necessary for centering the menu. The updated code now looks like this:
<nav class="navbar navbar-light bg-light navbar-expand-lg sticky-top" id="myNavbar"gt;
<div class="container"> <!-- centering nav bar container -->
<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>
<div class="collapse navbar-collapse" id="mainNav">
...
The addition of the centering container rectified the alignment issue and ensured responsiveness. However, there remains an issue with the padding between elements and the caret alignment within the centered menu. Further tweaking is required to address these concerns.
To provide a visual reference, view the images below: