<!-- Container for demo purpose -->

<div class="container my-5 py-5">

​

  <!--Section: Design Block-->

  <nav class="navbar navbar-expand-lg navbar-light bg-light">

    <!-- Container wrapper -->

    <div class="container-fluid">

​

      <!-- Toggle button -->

      <button class="navbar-toggler px-0" type="button" data-mdb-collapse-init data-mdb-target="#navbarSupportedContent"

        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"><i class="fas fa-bars"></i></span>

      </button>

​

      <!-- Collapsible wrapper -->

      <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <!-- Left links -->

        <ul class="navbar-nav me-auto ps-lg-0" style="padding-left: .15rem;">

          <!-- Navbar dropdown -->

          <li class="nav-item dropdown position-static">

            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-mdb-dropdown-init

              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-lg-3 mb-3 mb-lg-0">

                    <div class="list-group list-group-flush">

                      <a href="" class="list-group-item list-group-item-action">Lorem ipsum</a>

                      <a href="" class="list-group-item list-group-item-action">Dolor sit</a>

                      <a href="" class="list-group-item list-group-item-action">Amet consectetur</a>

                      <a href="" class="list-group-item list-group-item-action">Cras justo odio</a>

                      <a href="" class="list-group-item list-group-item-action">Adipisicing elit</a>

                    </div>

                  </div>

                  <div class="col-md-6 col-lg-3 mb-3 mb-lg-0">

                    <div class="list-group list-group-flush">

                      <a href="" class="list-group-item list-group-item-action">Explicabo voluptas</a>

                      <a href="" class="list-group-item list-group-item-action">Perspiciatis quo</a>

                      <a href="" class="list-group-item list-group-item-action">Cras justo odio</a>

                      <a href="" class="list-group-item list-group-item-action">Laudantium maiores</a>

                      <a href="" class="list-group-item list-group-item-action">Provident dolor</a>

                    </div>

                  </div>

                  <div class="col-md-6 col-lg-3 mb-3 mb-md-0">

                    <div class="list-group list-group-flush">

                      <a href="" class="list-group-item list-group-item-action">Iste quaerato</a>

                      <a href="" class="list-group-item list-group-item-action">Cras justo odio</a>

                      <a href="" class="list-group-item list-group-item-action">Est iure</a>

                      <a href="" class="list-group-item list-group-item-action">Praesentium</a>

                      <a href="" class="list-group-item list-group-item-action">Laboriosam</a>

                    </div>

                  </div>

                  <div class="col-md-6 col-lg-3">

                    <div class="list-group list-group-flush">

                      <a href="" class="list-group-item list-group-item-action">Cras justo odio</a>

                      <a href="" class="list-group-item list-group-item-action">Saepe</a>

                      <a href="" class="list-group-item list-group-item-action">Vel alias</a>

                      <a href="" class="list-group-item list-group-item-action">Sunt doloribus</a>

                      <a href="" class="list-group-item list-group-item-action">Cum dolores</a>

                    </div>

                  </div>

                </div>

              </div>

            </div>

          </li>

        </ul>

        <!-- Left links -->

      </div>

      <!-- Collapsible wrapper -->

    </div>

    <!-- Container wrapper -->

  </nav>

  <!--Section: Design Block-->

​

</div>

<!-- Container for demo purpose -->

body {

  background-color: #eee;

}

​