JSFiddle - React, Tailwind, and code Playground

by Brnd13

HTML

<!-- Bootstrap 5.2 CSS -->
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>

<!-- Iconify (for menu icon) -->
<script src="https://code.iconify.design/2/2.1.0/iconify.min.js"></script>

<!-- Bootstrap 5.2 JS (includes Popper.js) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">
    <!-- Logo -->
    <a class="navbar-brand" href="#">
      <img
        src="https://my-site.co.uk/images/Homepage/menu.png"
        alt="Logo"
        width="90"
        height="35"
      />
    </a>

    <!-- Mobile toggle button -->
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarNav"
      aria-controls="navbarNav"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon">
        <iconify-icon
          icon="material-symbols:menu-rounded"
          width="24"
          height="24"
        ></iconify-icon>
      </span>
    </button>

    <!-- Navbar items -->
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <!-- Home Link -->
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>

        <!-- Tools & Equipment Dropdown -->
        <li class="nav-item dropdown mega-menu">
          <a
            class="nav-link dropdown-toggle"
            href="#"
            id="navbarDropdownTools"
            role="button"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            Tools & Equipment
          </a>
          <div
            class="dropdown-menu mega-dropdown-menu"
            aria-labelledby="navbarDropdownTools"
          >
            <div class="header">
              <h2>Tools & Equipment</h2>
            </div>
           ...

CSS

/* Ensure that the dropdown takes up the full width of the navbar */
.navbar .dropdown {
  position: relative;
}

.navbar {
  background-color: #111 !important;
}

.mega-dropdown-menu {
  position: absolute;
  top: 100%; /* Position it just below the dropdown button */
  left: 0;
  right: 0; /* Make it extend to the full width */
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  display: none;
  padding: 10px 0;
  box-sizing: border-box;
  z-index: 9999; /* Ensure dropdown is on top */
}

/* Show the mega dropdown when hovered */
.navbar .dropdown:hover .mega-dropdown-menu {
  display: block;
}

/* Columns inside the dropdown */
.mega-dropdown-menu .row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
}

.mega-dropdown-menu .column {
  flex: 1;
  min-width: 250px; /* Ensure columns do not become too small */
  background-color: #ccc;
  padding: 10px;
  box-sizing: border-box;
}

.mega-dropdown-menu .column h3 {
  margin-bottom: 10px;
}

.bAll {
  background-color: royalblue !important;
  color: white !important;
  padding: 8px !important;
}

.dropdown-item {
  display: block;
  padding: 8px 16px;
  color: black;
  white-space: nowrap;
}

.dropdown-item:hover {
  background-color: #ddd;
}

/* For mobile screens, make sure the dropdown covers full width and adapts properly */
@media (max-width: 768px) {
  .mega-dropdown-menu {
    position: fixed; /* Makes it fixed relative to the viewport */
    top: 0;
    left: 0;
    width: 100%; /* Takes full width of the viewport */
    right: 0;
    box-sizing: border-box;
  }

  .mega-dropdown-menu .row {
    flex-direction: column;
  }

  .mega-dropdown-menu .column {
    width: 100%; /* Make each column take full width on mobile */
  }
}