Bootstrap4: mega menu not staying centered when adding more items in the navigation

Question

I found some Bootstrap mega menu code online and it works well except the mega menu will not stay centered. It keeps floating to the left of the screen. Here is the original code:

<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="#" class="navbar-brand">Navbar Brand</a>
 <div class="collapse navbar-collapse" id="mainNav">
  <ul class="navbar-nav ml-auto nav-fill">

   <li class="nav-item px-4">
    <a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a>
   </li>

   <li class="nav-item px-4 dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="servicesDropdown">
     <a class="dropdown-item" href="#">What we do</a>
     <a class="dropdown-item" href="#">How we fit your needs</a>
     <div class="dropdown-divider"></div>
     <div class="d-md-flex align-items-start justify-content-start">
      <div>   
       <div class="dropdown-header">Development</div>
       <a class="dropdown-item" href="#">Bespoke software</a>
       <a class="dropdown-item" href="#">Mobile apps</a>
       <a class="dropdown-item" href="#">Websites</a>
      </div>
      <div>
       <div class="dropdown-header">Professional Services</div>
       <a class="dropdown-item" href="#">Project rescue</a>
       <a class="dropdown-item" href="#">Source code recovery</a>
       <a class="dropdown-item" href="#">Application support &amp; maintenance</a>
      </div>
      <div>
       <div class="dropdown-header">Fixed Price Services</div>
       <a class="dropdown-item" href="#">Add cookie consent</a>
       <a class="dropdown-item" href="#">Add captcha</a>
       <a class="dropdown-item" href="#">Add core data</a>
       <a class="dropdown-item" href="#">Custom error pages</a>
       <a class="dropdown-item" href="#">Contact form creation</a>
       <a class="dropdown-item" href="#">Automated backups</a>
       <a class="dropdown-item" href="#">Image to HTML</a>
      </div>
           <div>
       <div class="dropdown-header">Fixed Price Services</div>
       <a class="dropdown-item" href="#">Add cookie consent</a>
       <a class="dropdown-item" href="#">Add captcha</a>
       <a class="dropdown-item" href="#">Add core data</a>
       <a class="dropdown-item" href="#">Custom error pages</a>
       <a class="dropdown-item" href="#">Contact form creation</a>
       <a class="dropdown-item" href="#">Automated backups</a>
       <a class="dropdown-item" href="#">Image to HTML</a>
      </div>
           <div>
       <div class="dropdown-header">Fixed Price Services</div>
       <a class="dropdown-item" href="#">Add cookie consent</a>
       <a class="dropdown-item" href="#">Add captcha</a>
       <a class="dropdown-item" href="#">Add core data</a>
       <a class="dropdown-item" href="#">Custom error pages</a>
       <a class="dropdown-item" href="#">Contact form creation</a>
       <a class="dropdown-item" href="#">Automated backups</a>
       <a class="dropdown-item" href="#">Image to HTML</a>
      </div>
     </div>
    </div>
   </li>
   <li class="nav-item px-4">
    <a href="#" class="nav-link">Contact</a>
   </li>
   <li class="nav-item px-4">
    <a href="#" class="nav-link">Blog</a>
   </li>
  </ul>
 </div>
</nav>

It stays centered if there are only 3 parent items, but not the 5 I need. Can someone help? I'm tried looking for solutions online to no avail.

Answer 1

for any number of items in your top navigation, you can take a slightly different approach.

• Have the mega menu (MM) outside the nav
• have this MM display:none by default
• toggle a class which shows the MM

working snippet below:

$(document).ready(function() {
  $('#servicesDropdown').click(function() {
    $('.ourMegaMenu').hasClass('showMM') ? $('.ourMegaMenu').removeClass('showMM') : $('.ourMegaMenu').addClass('showMM');
  });
});

.ourMegaMenu {
  display: none;
}

.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  flex-grow: 1
}

.showMM {
  display: block;
}

.flex-container .dropdown-item {
  white-space: pre-wrap;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.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="#" class="navbar-brand">Navbar Brand</a>
  <div class="collapse navbar-collapse" id="mainNav">
    <ul class="navbar-nav ml-auto nav-fill">

      <li class="nav-item px-4">
        <a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a>
      </li>

      <li class="nav-item px-4 dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>

      </li>
      <li class="nav-item px-4">
        <a href="#" class="nav-link">Contact</a>
      </li>
      <li class="nav-item px-4">
        <a href="#" class="nav-link">Blog</a>
      </li>
    </ul>
  </div>
</nav>
<div class="ourMegaMenu" aria-labelledby="servicesDropdown">
  <a class="dropdown-item" href="#">What we do</a>
  <a class="dropdown-item" href="#">How we fit your needs</a>
  <div class="dropdown-divider"></div>
  <div class="d-md-flex align-items-start justify-content-start flex-container">
    <div class=''>
      <div class="dropdown-header">Development</div>
      <a class="dropdown-item" href="#">Bespoke software</a>
      <a class="dropdown-item" href="#">Mobile apps</a>
      <a class="dropdown-item" href="#">Websites</a>
    </div>
    <div>
      <div class="dropdown-header">Professional Services</div>
      <a class="dropdown-item" href="#">Project rescue</a>
      <a class="dropdown-item" href="#">Source code recovery</a>
      <a class="dropdown-item" href="#">Application support &amp; maintenance</a>
    </div>
    <div>
      <div class="dropdown-header">Fixed Price Services</div>
      <a class="dropdown-item" href="#">Add cookie consent</a>
      <a class="dropdown-item" href="#">Add captcha</a>
      <a class="dropdown-item" href="#">Add core data</a>
      <a class="dropdown-item" href="#">Custom error pages</a>
      <a class="dropdown-item" href="#">Contact form creation</a>
      <a class="dropdown-item" href="#">Automated backups</a>
      <a class="dropdown-item" href="#">Image to HTML</a>
    </div>
    <div>
      <div class="dropdown-header">Fixed Price Services</div>
      <a class="dropdown-item" href="#">Add cookie consent</a>
      <a class="dropdown-item" href="#">Add captcha</a>
      <a class="dropdown-item" href="#">Add core data</a>
      <a class="dropdown-item" href="#">Custom error pages</a>
      <a class="dropdown-item" href="#">Contact form creation</a>
      <a class="dropdown-item" href="#">Automated backups</a>
      <a class="dropdown-item" href="#">Image to HTML</a>
    </div>
    <div>
      <div class="dropdown-header">Fixed Price Services</div>
      <a class="dropdown-item" href="#">Add cookie consent</a>
      <a class="dropdown-item" href="#">Add captcha</a>
      <a class="dropdown-item" href="#">Add core data</a>
      <a class="dropdown-item" href="#">Custom error pages</a>
      <a class="dropdown-item" href="#">Contact form creation</a>
      <a class="dropdown-item" href="#">Automated backups</a>
      <a class="dropdown-item" href="#">Image to HTML</a>
    </div>
  </div>
</div>