Mega Menu

Bootstrap Mega Menu - examples & tutorial

Responsive Mega Menu built with Bootstrap 5. Examples of dropdown on click and on hover. Templates with grid, images, links, lists and more.

To learn more read Navbar Docs.


Basic example


                      <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-toggle="collapse"
                            data-mdb-target="#navbarExample1"
                            aria-controls="navbarExample1"
                            aria-expanded="false"
                            aria-label="Toggle navigation"
                          >
                            <i class="fas fa-bars"></i>
                          </button>

                          <!-- Collapsible wrapper -->
                          <div
                            class="collapse navbar-collapse"
                            id="navbarExample1"
                          >
                            <!-- 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
                                  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-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>
                    

Bolded headings


                      <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-toggle="collapse"
                            data-mdb-target="#navbarExample2"
                            aria-controls="navbarExample2"
                            aria-expanded="false"
                            aria-label="Toggle navigation"
                          >
                            <i class="fas fa-bars"></i>
                          </button>

                          <!-- Collapsible wrapper -->
                          <div
                            class="collapse navbar-collapse"
                            id="navbarExample2"
                          >
                            <!-- 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
                                  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-lg-3 mb-3 mb-lg-0"
                                      >
                                        <div
                                          class="list-group list-group-flush"
                                        >
                                          <p
                                            class="mb-0 list-group-item text-uppercase font-weight-bold"
                                          >
                                            Lorem ipsum
                                          </p>
                                          <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"
                                        >
                                          <p
                                            class="mb-0 list-group-item text-uppercase font-weight-bold"
                                          >
                                            Explicabo voluptas
                                          </p>
                                          <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"
                                        >
                                          <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"
                                            >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"
                                        >
                                          <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"
                                            >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>
                    

Punctation


                      <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-toggle="collapse"
                            data-mdb-target="#navbarExample3"
                            aria-controls="navbarExample3"
                            aria-expanded="false"
                            aria-label="Toggle navigation"
                          >
                            <i class="fas fa-bars"></i>
                          </button>

                          <!-- Collapsible wrapper -->
                          <div
                            class="collapse navbar-collapse"
                            id="navbarExample3"
                          >
                            <!-- 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
                                  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-lg-3 mb-3 mb-lg-0"
                                      >
                                        <div
                                          class="list-group list-group-flush"
                                        >
                                          <p
                                            class="mb-0 list-group-item text-uppercase font-weight-bold"
                                          >
                                            Lorem ipsum
                                          </p>
                                          <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
                                            >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"
                                        >
                                          <p
                                            class="mb-0 list-group-item text-uppercase font-weight-bold"
                                          >
                                            Explicabo voluptas
                                          </p>
                                          <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
                                        class="col-md-6 col-lg-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
                                          >
                                        </div>
                                      </div>
                                      <div class="col-md-6 col-lg-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"
                                            >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>
                    

Mixed content


                      <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-toggle="collapse"
                            data-mdb-target="#navbarExample4"
                            aria-controls="navbarExample4"
                            aria-expanded="false"
                            aria-label="Toggle navigation"
                          >
                            <i class="fas fa-bars"></i>
                          </button>

                          <!-- 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
                                  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://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>
                                      <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-dark">
                                            <div
                                              class="row mb-4 border-bottom pb-2"
                                            >
                                              <div class="col-3">
                                                <img
                                                  src="https://mdbootstrap.com/img/new/standard/city/041.jpg"
                                                  class="img-fluid shadow-1-strong rounded"
                                                  alt=""
                                                />
                                              </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-dark">
                                            <div
                                              class="row mb-4 border-bottom pb-2"
                                            >
                                              <div class="col-3">
                                                <img
                                                  src="https://mdbootstrap.com/img/new/standard/city/042.jpg"
                                                  class="img-fluid shadow-1-strong rounded"
                                                  alt=""
                                                />
                                              </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-dark">
                                            <div
                                              class="row mb-4 border-bottom pb-2"
                                            >
                                              <div class="col-3">
                                                <img
                                                  src="https://mdbootstrap.com/img/new/standard/city/043.jpg"
                                                  class="img-fluid shadow-1-strong rounded"
                                                  alt=""
                                                />
                                              </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-dark">
                                            <div
                                              class="row mb-4 border-bottom pb-2"
                                            >
                                              <div class="col-3">
                                                <img
                                                  src="https://mdbootstrap.com/img/new/standard/city/044.jpg"
                                                  class="img-fluid shadow-1-strong rounded"
                                                  alt=""
                                                />
                                              </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 -->
                        </div>
                        <!-- Container wrapper -->
                      </nav>
                    

Media list


                      <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-toggle="collapse"
                            data-mdb-target="#navbarExample5"
                            aria-controls="navbarExample5"
                            aria-expanded="false"
                            aria-label="Toggle navigation"
                          >
                            <i class="fas fa-bars"></i>
                          </button>

                          <!-- Collapsible wrapper -->
                          <div
                            class="collapse navbar-collapse"
                            id="navbarExample5"
                          >
                            <!-- 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
                                  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-12 col-lg-4 mb-4 mb-lg-0"
                                      >
                                        <p
                                          class="text-uppercase font-weight-bold"
                                        >
                                          Explicabo voluptas
                                        </p>
                                        <a href="" class="text-dark">
                                          <div
                                            class="row mb-4 border-bottom pb-2"
                                          >
                                            <div class="col-3">
                                              <img
                                                src="https://mdbootstrap.com/img/new/standard/city/041.jpg"
                                                class="img-fluid shadow-1-strong rounded"
                                                alt=""
                                              />
                                            </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-dark">
                                          <div
                                            class="row mb-4 border-bottom pb-2"
                                          >
                                            <div class="col-3">
                                              <img
                                                src="https://mdbootstrap.com/img/new/standard/city/042.jpg"
                                                class="img-fluid shadow-1-strong rounded"
                                                alt=""
                                              />
                                            </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-dark">
                                          <div
                                            class="row mb-4 border-bottom pb-2"
                                          >
                                            <div class="col-3">
                                              <img
                                                src="https://mdbootstrap.com/img/new/standard/city/043.jpg"
                                                class="img-fluid shadow-1-strong rounded"
                                                alt=""
                                              />
                                            </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-dark">
                                          <div class="row border-bottom pb-2">
                                            <div class="col-3">
                                              <img
                                                src="https://mdbootstrap.com/img/new/standard/city/044.jpg"
                                                class="img-fluid shadow-1-strong rounded"
                                                alt=""
                                              />
                                            </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
                                        class="col-md-6 col-lg-4 mb-4 mb-md-0"
                                      >
                                        <p
                                          class="text-uppercase font-weight-bold"
                                        >
                                          Iste quaerato
                                        </p>
                                        <a href="" class="text-dark">
                                          <div
                                            class="row mb-4 border-bottom pb-2"
                                          >
                                            <div class="col-3">
                                              <img
                                                src="https://mdbootstrap.com/img/new/standard/city/041.jpg"
                                                class="img-fluid shadow-1-strong rounded"
                                                alt=""
                                              />
                                            </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-dark">
                                          <div
                                            class="row mb-4 border-bottom pb-2"
                                          >
                                            <div class="col-3">
                                              <img
                                                src="https://mdbootstrap.com/img/new/standard/city/042.jpg"
                                                class="img-fluid shadow-1-strong rounded"
                                                alt=""
                                              />
                                            </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-dark">
                                          <div
                                            class="row mb-4 border-bottom pb-2"
                                          >
                                            <div class="col-3">
                                              <img
                                                src="https://mdbootstrap.com/img/new/standard/city/043.jpg"
                                                class="img-fluid shadow-1-strong rounded"
                                                alt=""
                                              />
                                            </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-dark">
                                          <div class="row border-bottom pb-2">
                                            <div class="col-3">
                                              <img
                                                src="https://mdbootstrap.com/img/new/standard/city/044.jpg"
                                                class="img-fluid shadow-1-strong rounded"
                                                alt=""
                                              />
                                            </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
                                        class="col-md-6 col-lg-4 mb-4 mb-md-0"
                                      >
                                        <p
                                          class="text-uppercase font-weight-bold"
                                        >
                                          Cras justo odio
                                        </p>
                                        <a href="" class="text-dark">
                                          <div
                                            class="row mb-4 border-bottom pb-2"
                                          >
                                            <div class="col-3">
                                              <img
                                                src="https://mdbootstrap.com/img/new/standard/city/041.jpg"
                                                class="img-fluid shadow-1-strong rounded"
                                                alt=""
                                              />
                                            </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-dark">
                                          <div
                                            class="row mb-4 border-bottom pb-2"
                                          >
                                            <div class="col-3">
                                              <img
                                                src="https://mdbootstrap.com/img/new/standard/city/042.jpg"
                                                class="img-fluid shadow-1-strong rounded"
                                                alt=""
                                              />
                                            </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-dark">
                                          <div
                                            class="row mb-4 border-bottom pb-2"
                                          >
                                            <div class="col-3">
                                              <img
                                                src="https://mdbootstrap.com/img/new/standard/city/043.jpg"
                                                class="img-fluid shadow-1-strong rounded"
                                                alt=""
                                              />
                                            </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-dark">
                                          <div class="row border-bottom pb-2">
                                            <div class="col-3">
                                              <img
                                                src="https://mdbootstrap.com/img/new/standard/city/044.jpg"
                                                class="img-fluid shadow-1-strong rounded"
                                                alt=""
                                              />
                                            </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>
                                </div>
                              </li>
                            </ul>
                            <!-- Left links -->
                          </div>
                          <!-- Collapsible wrapper -->
                        </div>
                        <!-- Container wrapper -->
                      </nav>
                    

Big news


                      <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-toggle="collapse"
                            data-mdb-target="#navbarExample6"
                            aria-controls="navbarExample6"
                            aria-expanded="false"
                            aria-label="Toggle navigation"
                          >
                            <i class="fas fa-bars"></i>
                          </button>

                          <!-- Collapsible wrapper -->
                          <div
                            class="collapse navbar-collapse"
                            id="navbarExample6"
                          >
                            <!-- 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
                                  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-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 ripple mb-4"
                                          data-mdb-ripple-color="light"
                                        >
                                          <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 ripple mb-4"
                                          data-mdb-ripple-color="light"
                                        >
                                          <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 ripple mb-4"
                                          data-mdb-ripple-color="light"
                                        >
                                          <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>
                    

Mixed media


                      <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-toggle="collapse"
                            data-mdb-target="#navbarExample7"
                            aria-controls="navbarExample7"
                            aria-expanded="false"
                            aria-label="Toggle navigation"
                          >
                            <i class="fas fa-bars"></i>
                          </button>

                          <!-- Collapsible wrapper -->
                          <div
                            class="collapse navbar-collapse"
                            id="navbarExample7"
                          >
                            <!-- 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
                                  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-12 col-xl-6 mb-4 col-lg-0"
                                      >
                                        <p
                                          class="text-uppercase font-weight-bold text-center d-flex justify-content-center align-items-center"
                                        >
                                          Iste quaerato
                                          <span
                                            class="badge bg-danger shadow-1-strong ms-2"
                                            >News of the day</span
                                          >
                                        </p>
                                        <div class="row gx-4">
                                          <div class="col-md-6 mb-4">
                                            <div
                                              class="bg-image hover-overlay ripple rounded shadow-2-strong"
                                              data-mdb-ripple-color="light"
                                            >
                                              <img
                                                src="https://mdbootstrap.com/img/new/slides/080.jpg"
                                                class="img-fluid"
                                              />
                                              <a href="#!">
                                                <div
                                                  class="mask"
                                                  style="
                                                    background-color: rgba(
                                                      251,
                                                      251,
                                                      251,
                                                      0.15
                                                    );
                                                  "
                                                ></div>
                                              </a>
                                            </div>
                                          </div>
                                          <div class="col-md-6 mb-3">
                                            <p class="text-muted">
                                              Lorem ipsum dolor sit amet
                                              consectetur adipisicing elit.
                                              Facilis consequatur eligendi
                                              quisquam doloremque vero ex
                                              debitis veritatis placeat unde
                                              animi laborum sapiente illo
                                              possimus, commodi dignissimos
                                              obcaecati illum maiores corporis.
                                            </p>
                                            <button
                                              type="button"
                                              class="btn btn-primary"
                                            >
                                              Read more
                                            </button>
                                          </div>
                                        </div>
                                      </div>
                                      <div
                                        class="col-md-6 col-xl-3 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 ripple mb-4"
                                          data-mdb-ripple-color="light"
                                        >
                                          <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-6 col-xl-3">
                                        <p
                                          class="text-uppercase font-weight-bold"
                                        >
                                          Explicabo voluptas
                                        </p>
                                        <a href="" class="text-dark">
                                          <div
                                            class="row mb-4 border-bottom pb-2"
                                          >
                                            <div class="col-3">
                                              <img
                                                src="https://mdbootstrap.com/img/new/standard/city/041.jpg"
                                                class="img-fluid shadow-1-strong rounded"
                                                alt=""
                                              />
                                            </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-dark">
                                          <div
                                            class="row mb-4 border-bottom pb-2"
                                          >
                                            <div class="col-3">
                                              <img
                                                src="https://mdbootstrap.com/img/new/standard/city/042.jpg"
                                                class="img-fluid shadow-1-strong rounded"
                                                alt=""
                                              />
                                            </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-dark">
                                          <div
                                            class="row mb-4 border-bottom pb-2"
                                          >
                                            <div class="col-3">
                                              <img
                                                src="https://mdbootstrap.com/img/new/standard/city/043.jpg"
                                                class="img-fluid shadow-1-strong rounded"
                                                alt=""
                                              />
                                            </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-dark">
                                          <div
                                            class="row mb-4 border-bottom pb-2"
                                          >
                                            <div class="col-3">
                                              <img
                                                src="https://mdbootstrap.com/img/new/standard/city/044.jpg"
                                                class="img-fluid shadow-1-strong rounded"
                                                alt=""
                                              />
                                            </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>
                                </div>
                              </li>
                            </ul>
                            <!-- Left links -->
                          </div>
                          <!-- Collapsible wrapper -->
                        </div>
                        <!-- Container wrapper -->
                      </nav>
                    

Dropdown on hover


                    <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-toggle="collapse"
                          data-mdb-target="#navbarExampleOnHover" aria-controls="navbarExampleOnHover" aria-expanded="false"
                          aria-label="Toggle navigation">
                          <i class="fas fa-bars"></i>
                        </button>
    
                        <!-- Collapsible wrapper -->
                        <div class="collapse navbar-collapse" id="navbarExampleOnHover">
                          <!-- 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 dropdown-hover position-static">
                              <a 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-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>
                    

                      .dropdown-hover:hover>.dropdown-menu {
                        display: inline-block;
                      }
    
                      .dropdown-hover>.dropdown-toggle:active {
                        /*Without this, clicking will make it sticky*/
                        pointer-events: none;
                      }