<!-- 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-4 mb-4 mb-md-0">

                    <p class="text-uppercase font-weight-bold">Explicabo voluptas</p>

                    <div class="bg-image hover-overlay shadow-1-strong rounded mb-4"

                      data-mdb-ripple-color="light" data-mdb-ripple-init>

                      <img src="https://mdbootstrap.com/img/new/fluid/city/113.jpg" 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-dark">

                      <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 class="col-md-4 mb-4 mb-md-0">

                    <p class="text-uppercase font-weight-bold">Iste quaerato</p>

                    <div class="bg-image hover-overlay shadow-1-strong rounded mb-4"

                      data-mdb-ripple-color="light" data-mdb-ripple-init>

                      <img src="https://mdbootstrap.com/img/new/fluid/city/011.jpg" 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-danger"><i class="fas fa-chart-pie pe-1"></i>Business</a>

                      <p><u>15.07.2020</u></p>

                    </div>

                    <a href="" class="text-dark">

                      <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 class="col-md-4">

                    <p class="text-uppercase font-weight-bold">Cras justo odio</p>

                    <div class="bg-image hover-overlay shadow-1-strong rounded mb-4"

                      data-mdb-ripple-color="light" data-mdb-ripple-init>

                      <img src="https://mdbootstrap.com/img/new/fluid/city/018.jpg" 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-warning"><i class="fas fa-code pe-1"></i>Technology</a>

                      <p><u>15.07.2020</u></p>

                    </div>

                    <a href="" class="text-dark">

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

            </div>

          </li>

        </ul>

        <!-- Left links -->

      </div>

      <!-- Collapsible wrapper -->

    </div>

    <!-- Container wrapper -->

  </nav>

  <!--Section: Design Block-->

​

</div>

<!-- Container for demo purpose -->