Bootstrap4: мегаменю не остается в центре при добавлении дополнительных элементов в навигацию

Question

Я нашел в Интернете код Bootstrap мегаменю, и он работает хорошо, за исключением того, что мегаменю не остается в центре. Он продолжает плавать в левой части экрана. Вот исходный код:

<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>

Он остается в центре, если есть только 3 родительских элемента, но не 5, которые мне нужны. Может кто поможет? Я безуспешно пытался искать решения в Интернете.

Answer 1

для любого количества элементов в верхней навигации, вы можете использовать немного другой подход.

• Сделайте мегаменю (MM) вне навигационной панели
• используйте это MM display:none по умолчанию
• переключает класс, который показывает рабочий фрагмент MM

ниже:

$(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>