Bootstrap 5 Responsive Mega Menu on Hover

Bootstrap 5 Responsive Mega Menu on Hover
Code Snippet:Responsive Bootstrap 5 Mega Menu #2
Author: Coding Yaar
Published: 1 month ago
Last Updated: June 13, 2024
Downloads: 80
License: MIT
Edit Code online: View on CodePen
Read More

This code helps create a Bootstrap 5 responsive mega menu that appears on hover. It customizes the menu’s appearance and behavior. The CSS code adjusts the menu’s width and item colors based on hover actions. It ensures that the mega menu displays correctly on larger screens. This feature is useful for enhancing website navigation and user experience.

You can use this code on websites to enhance navigation with a responsive mega menu. It improves user experience by providing a visually appealing and organized menu.

How to Create Bootstrap 5 Responsive Mega Menu On Hover

1. First, ensure Bootstrap 5 CSS and JS are included in your project. You can add them via a CDN in the <head> of your HTML file.

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css'>

2. Create the HTML structure for your mega menu inside the <body> tag. Customize the menu items within the <ul class="dropdown-menu"> according to your needs. You can change the text, add more items, or include other Bootstrap components.

<nav class="navbar navbar-expand-lg shadow-sm">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Categories
          </a>
          <div class="dropdown-menu px-3 rounded-3 border-0 shadow">
            <div class="row">
              <div class="col-sm-6">
                <a href="#">
                  <div class="d-flex align-items-center py-3 px-1 rounded-3">
                    <div class="icon px-3 bg-warning-subtle rounded-3 fs-1">
                      <i class="bi bi-tv"></i>
                    </div>
                    <div class="text ps-3">
                      <h5>Television</h5>
                      <div>Irure incididunt eu irure quis ipsum
                        occaecat dolor quis.</div>
                    </div>
                  </div>
                </a>
              </div>
              <div class="col-sm-6">
                <a href="#">
                  <div class="d-flex align-items-center py-3 px-1 rounded-3">
                    <div class="icon px-3 bg-danger-subtle rounded-3 fs-1">
                      <i class="bi bi-headphones"></i>
                    </div>
                    <div class="text ps-3">
                      <h5>Headphones</h5>
                      <div>Irure incididunt eu irure quis ipsum
                        occaecat dolor quis.</div>
                    </div>
                  </div>
                </a>
              </div>
              <div class="col-sm-6">
                <a href="#">
                  <div class="d-flex align-items-center py-3 px-1 rounded-3">
                    <div class="icon px-3 bg-success-subtle rounded-3 fs-1">
                      <i class="bi bi-phone"></i>
                    </div>
                    <div class="text ps-3">
                      <h5>Smartphone</h5>
                      <div>Irure incididunt eu irure quis ipsum
                        occaecat dolor quis.</div>
                    </div>
                  </div>
                </a>
              </div>
              <div class="col-sm-6">
                <a href="#">
                  <div class="d-flex align-items-center py-3 px-1 rounded-3">
                    <div class="icon px-3 bg-secondary-subtle rounded-3 fs-1">
                      <i class="bi bi-laptop"></i>
                    </div>
                    <div class="text ps-3">
                      <h5>Laptop</h5>
                      <div>Irure incididunt eu irure quis ipsum
                        occaecat dolor quis.</div>
                    </div>
                  </div>
                </a>
              </div>
              <div class="col-sm-6">
                <a href="#">
                  <div class="d-flex align-items-center py-3 px-1 rounded-3">
                    <div class="icon px-3 bg-body-tertiary rounded-3 fs-1">
                      <i class="bi bi-smartwatch"></i>
                    </div>
                    <div class="text ps-3">
                      <h5>Smartwatch</h5>
                      <div>Irure incididunt eu irure quis ipsum
                        occaecat dolor quis.</div>
                    </div>
                  </div>
                </a>
              </div>
              <div class="col-sm-6">
                <a href="#">
                  <div class="d-flex align-items-center py-3 px-1 rounded-3">
                    <div class="icon px-3 bg-info-subtle rounded-3 fs-1">
                      <i class="bi bi-earbuds"></i>
                    </div>
                    <div class="text ps-3">
                      <h5>Earbuds</h5>
                      <div>Irure incididunt eu irure quis ipsum
                        occaecat dolor quis.</div>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

<p class="mt-5 text-center">Get a step-by-step written explanation here: <a href="https://codingyaar.com/responsive-bootstrap-5-mega-menu" target="_blank">Responsive Bootstrap 5 Mega Menu</a> </p>

3. Now, copy and paste the following CSS code inside the <style> tag in your HTML document. This CSS customizes the appearance and behavior of the mega menu.

.dropdown-menu a {
  text-decoration: none;
  color: #000000;
}
.dropdown-menu a .d-flex {
  transition: all 0.5s;
}
.dropdown-menu .col-sm-6:nth-child(1) a:hover .d-flex {
  background-color: var(--bs-warning-bg-subtle);
}
.dropdown-menu .col-sm-6:nth-child(2) a:hover .d-flex {
  background-color: var(--bs-danger-bg-subtle);
}
.dropdown-menu .col-sm-6:nth-child(3) a:hover .d-flex {
  background-color: var(--bs-success-bg-subtle);
}
.dropdown-menu .col-sm-6:nth-child(4) a:hover .d-flex {
  background-color: var(--bs-secondary-bg-subtle);
}
.dropdown-menu .col-sm-6:nth-child(5) a:hover .d-flex {
  background-color: var(--bs-tertiary-bg);
}
.dropdown-menu .col-sm-6:nth-child(6) a:hover .d-flex {
  background-color: var(--bs-info-bg-subtle);
}
@media only screen and (min-width: 992px) {
  .dropdown-menu {
    width: 55vw;
  }
  .dropdown:hover .dropdown-menu {
    display: flex;
  }
  .dropdown-menu.show {
    display: flex;
  }
}

4. Finally, load the Bootstrap Bungle JS by adding the following CDN link just before closing the body tag:

<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js'></script>

That’s all! hopefully, you have successfully created a responsive mega menu using Bootstrap 5. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.