Nav-Pills doesn't work with the Modal.

Expected behavior Nav-Pills should work with the Modal component Actual behavior The modal button prevents Nav-Pills from working.enter link description here Resources (screenshots, code snippets etc.)

Hello,

I have a problem I'd like to report when using the Modal element with the Mega Menu and Nav-Pills.

The Mega Menu works, but the Nav-Pills element is unresponsive.

The Mega Menu and Nav-Pills work perfectly if the button is removed from the Modal.

Line 40:

Launch demo modal

`

enter code here` Document sans nom Material Design for Bootstrap

  <!--  GOOGLE SEARCH -->
   <div class="col-md-4 pt-0">  <script async src="https://cse.google.com/cse.js?cx=partner-pub-4451249417804546:0932509138"></script><div class="gcse-search"></div></div>
       <!--  /GOOGLE SEARCH -->     

Et Aussi... Galerie

Launch demo modal

  <hr class="hr hr-blurry">

<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarExample4">
  <!-- Left links -->
  <ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
    <li class="nav-item">
      <a class="nav-link" href="#">Regular link</a>
    </li>
    <!-- Navbar dropdown -->
    <li class="nav-item dropdown position-static">
      <a data-mdb-dropdown-init class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
        data-mdb-toggle="dropdown" aria-expanded="false">
        Mega menu
      </a>
      <!-- Dropdown menu -->
      <div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown" style="
                      border-top-left-radius: 0;
                      border-top-right-radius: 0;
                    ">
        <div class="container">
          <div class="row my-4">
            <div class="col-md-6 col-xl-3 mb-3 mb-xl-0">
              <div class="pt-2">
                <p class="text-uppercase font-weight-bold">
                  Explicabo voluptas
                </p>
                <div class="bg-image hover-overlay shadow-1-strong rounded ripple mb-4"
                  data-mdb-ripple-color="light">
                  <img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp" class="img-fluid" />
                  <a href="#!">
                    <div class="mask" style="
                                    background-color: rgba(
                                      251,
                                      251,
                                      251,
                                      0.15
                                    );
                                  "></div>
                  </a>
                </div>
                <div class="d-flex justify-content-between">
                  <a href="" class="text-info"><i class="fas fa-plane pe-1"></i>Travels</a>
                  <p><u>15.07.2020</u></p>
                </div>
                <a href="" class="text-body">
                  <h5>This is title of the news</h5>
                  <p>
                    Lorem ipsum dolor sit amet
                    consectetur adipisicing elit.
                    Odit, iste aliquid. Sed id nihil
                    magni, sint vero provident esse
                    numquam perferendis ducimus dicta
                    adipisci iusto nam temporibus modi
                    animi laboriosam?
                  </p>
                </a>
              </div>
            </div>
            <div class="col-md-6 col-xl-3 mb-3 mb-xl-0">
              <div class="pt-2">
                <p class="text-uppercase font-weight-bold">
                  Explicabo voluptas
                </p>
                <a href="" class="text-body">
                  <div class="row mb-4 border-bottom pb-2">
                    <div class="col-3">
                      <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
                        class="img-fluid shadow-1-strong rounded" alt="Hollywood Sign on The Hill" />
                    </div>
                    <div class="col-9">
                      <p class="mb-2">
                        <strong>Lorem ipsum dolor sit
                          amet</strong>
                      </p>
                      <p><u>15.07.2020</u></p>
                    </div>
                  </div>
                </a>
                <a href="" class="text-body">
                  <div class="row mb-4 border-bottom pb-2">
                    <div class="col-3">
                      <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp"
                        class="img-fluid shadow-1-strong rounded" alt="Palm Springs" />
                    </div>
                    <div class="col-9">
                      <p class="mb-2">
                        <strong>Lorem ipsum dolor sit
                          amet</strong>
                      </p>
                      <p><u>15.07.2020</u></p>
                    </div>
                  </div>
                </a>
                <a href="" class="text-body">
                  <div class="row mb-4 border-bottom pb-2">
                    <div class="col-3">
                      <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp"
                        class="img-fluid shadow-1-strong rounded" alt="Los Angeles Skyscrapers" />
                    </div>
                    <div class="col-9">
                      <p class="mb-2">
                        <strong>Lorem ipsum dolor sit
                          amet</strong>
                      </p>
                      <p><u>15.07.2020</u></p>
                    </div>
                  </div>
                </a>
                <a href="" class="text-body">
                  <div class="row mb-4 border-bottom pb-2">
                    <div class="col-3">
                      <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
                        class="img-fluid shadow-1-strong rounded" alt="Skyscrapers" />
                    </div>
                    <div class="col-9">
                      <p class="mb-2">
                        <strong>Lorem ipsum dolor sit
                          amet</strong>
                      </p>
                      <p><u>15.07.2020</u></p>
                    </div>
                  </div>
                </a>
              </div>
            </div>
            <div class="col-md-6 col-xl-3 mb-3 mb-md-0">
              <div class="list-group list-group-flush">
                <p class="mb-0 list-group-item text-uppercase font-weight-bold">
                  Iste quaerato
                </p>
                <a href="" class="list-group-item list-group-item-action"><i
                    class="fas fa-caret-right pe-2"></i>Cras justo odio</a>
                <a href="" class="list-group-item list-group-item-action"><i
                    class="fas fa-caret-right pe-2"></i>Est iure</a>
                <a href="" class="list-group-item list-group-item-action"><i
                    class="fas fa-caret-right pe-2"></i>Praesentium</a>
                <a href="" class="list-group-item list-group-item-action"><i
                    class="fas fa-caret-right pe-2"></i>Laboriosam</a>
                <a href="" class="list-group-item list-group-item-action"><i
                    class="fas fa-caret-right pe-2"></i>Dolor sit</a>
                <a href="" class="list-group-item list-group-item-action"><i
                    class="fas fa-caret-right pe-2"></i>Amet consectetur</a>
                <a href="" class="list-group-item list-group-item-action"><i
                    class="fas fa-caret-right pe-2"></i>Cras justo odio</a>
                <a href="" class="list-group-item list-group-item-action"><i
                    class="fas fa-caret-right pe-2"></i>Adipiscing elit</a>
              </div>
            </div>
            <div class="col-md-6 col-xl-3">
              <div class="list-group list-group-flush">
                <p class="mb-0 list-group-item text-uppercase font-weight-bold">
                  Cras justo odio
                </p>
                <a href="" class="list-group-item list-group-item-action"><i
                    class="fas fa-caret-right pe-2"></i>Saepe</a>
                <a href="" class="list-group-item list-group-item-action"><i
                    class="fas fa-caret-right pe-2"></i>Vel alias</a>
                <a href="" class="list-group-item list-group-item-action"><i
                    class="fas fa-caret-right pe-2"></i>Sunt doloribus</a>
                <a href="" class="list-group-item list-group-item-action"><i
                    class="fas fa-caret-right pe-2"></i>Cum dolores</a>
                <a href="" class="list-group-item list-group-item-action"><i
                    class="fas fa-caret-right pe-2"></i>Perspiciatis quo</a>
                <a href="" class="list-group-item list-group-item-action"><i
                    class="fas fa-caret-right pe-2"></i>Cras justo odio</a>
                <a href="" class="list-group-item list-group-item-action"><i
                    class="fas fa-caret-right pe-2"></i>Laudantium maiores</a>
                <a href="" class="list-group-item list-group-item-action"><i
                    class="fas fa-caret-right pe-2"></i>Provident dolor</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
  <!-- Left links -->
</div>
<!-- Collapsible wrapper -->

Our services Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum laborum animi doloremque nam dicta veniam dolor ea nostrum excepturi laboriosam molestiae, expedita odit id! Sunt quia cumque consequatur perferendis hic.

Therapy Massage Cosmetic Harmony Face and body treatments Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo animi soluta ratione quisquam, dicta ab cupiditate iure eaque? Repellendus voluptatum, magni impedit eaque delectus, beatae maxime temporibus maiores quibusdam quasi.Rem magnam ad perferendis iusto sint tempora ea voluptatibus iure, animi excepturi modi aut possimus in hic molestias repellendus illo ullam odit quia velit.

Massages Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo animi soluta ratione quisquam, dicta ab cupiditate iure eaque? Repellendus voluptatum, magni impedit eaque delectus, beatae maxime temporibus maiores quibusdam quasi.Rem magnam ad perferendis iusto sint tempora ea voluptatibus iure, animi excepturi modi aut possimus in hic molestias repellendus illo ullam odit quia velit.

Cosmetics Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo animi soluta ratione quisquam, dicta ab cupiditate iure eaque? Repellendus voluptatum, magni impedit eaque delectus, beatae maxime temporibus maiores quibusdam quasi.Rem magnam ad perferendis iusto sint tempora ea voluptatibus iure, animi excepturi modi aut possimus in hic molestias repellendus illo ullam odit quia velit.

Harmony Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo animi soluta ratione quisquam, dicta ab cupiditate iure eaque? Repellendus voluptatum, magni impedit eaque delectus, beatae maxime temporibus maiores quibusdam quasi.Rem magnam ad perferendis iusto sint tempora ea voluptatibus iure, animi excepturi modi aut possimus in hic molestias repellendus illo ullam odit quia velit.

 <!-- Modal -->

Modal title ... Close Save changes

Do you have a solution to suggest?

Thank you.

---