Black shop Header

<div class="container py-4">
  <!-- 2. Full Container Wide Navigation Menu with Hover Effect -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark rounded-4 mb-5 p-3 shadow hover-nav">
    <div class="container-fluid">
      <a class="navbar-brand fw-bold" href="#">SHOP<span class="text-primary">EASE</span></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navMenu">
        <ul class="navbar-nav w-100 justify-content-between text-center">
          <li class="nav-item"><a class="nav-link px-3" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link px-3" href="#">Shop</a></li>
          <li class="nav-item"><a class="nav-link px-3" href="#">Categories</a></li>
          <li class="nav-item"><a class="nav-link px-3" href="#">Cart</a></li>
          <li class="nav-item"><a class="nav-link px-3" href="#">Checkout</a></li>
          <li class="nav-item"><a class="nav-link px-3" href="#">Dashboard</a></li>
          <li class="nav-item"><a class="nav-link px-3" href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

</div>

<style>
  /* Full container wide navigation hover effect */
  .hover-nav .nav-link {
    transition: all 0.3s ease;
    position: relative;
  }

  .hover-nav .nav-link:after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #0d6efd;
    transition: width 0.3s ease;
  }

  .hover-nav .nav-link:hover:after {
    width: 100%;
  }

  .hover-nav .nav-link:hover {
    color: #0d6efd !important;
    transform: translateY(-2px);
  }

  /* Form Customization */
  .nav-pills .nav-link.active {
    background-color: #fff !important;
    color: #0d6efd !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  .nav-pills .nav-link {
    color: #6c757d;
  }

  @media (max-width: 991px) {
    .navbar-nav {
      padding-top: 20px;
    }

    .hover-nav .nav-link:after {
      display: none;
    }
  }

</style>

<script>
  // Handle form submission and show confirmation modal
  document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault();
    const confirmationModal = new bootstrap.Modal(document.getElementById('submitModal'));
    confirmationModal.show();
  });

</script>