new navbar TLUK

by Brnd13

HTML

<script src="https://code.iconify.design/2/2.2.1/iconify.min.js"></script>



<div class="navbar">
  <span class="comp-img" href="#">
    <img
      src="https://my-site.co.uk/images/Homepage/menu.png"
      alt="Logo"
      width="90"
      height="35"
    />
  </span>

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

  <a href="#">Home</a>
  <div class="dropdown">
    <button class="dropbtn">
      Tools & Equipment
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Tools & Equipment</h2>
      </div>
      <div class="row">
        <div class="column">
          <h3>Tools</h3>
          <a class="columnLinks bAll" href="#">Browse All</a>
          <a class="columnLinks" href="#">Screwdrivers</a>
          <a class="columnLinks" href="#">Spudgers</a>
          <a class="columnLinks" href="#">Suction Cups</a>
        </div>
        <div class="column">
          <h3>Equipment</h3>
          <a class="columnLinks bAll" href="#">Browse All</a>
          <a class="columnLinks" href="#">Pre-heating Devices</a>
          <a class="columnLinks" href="#">Mounts/Holders</a>
          <a class="columnLinks" href="#">Adhesives</a>
        </div>
        <div class="column">
          <h3>Adhesives</h3>
          <a class="columnLinks bAll" href="#">Browse All</a>
          <a class="columnLinks" href="#">iPhone Adhesive Seals</a>
          <a class="columnLinks" href="#">iPad Adhesive Seals</a>
          <a class="columnLinks" href="#">Glues</a>
        </div>
      </div>
    </div>
  </div>

  <div class="dropdown">
...

CSS

body {
  margin: 0;
}

.comp-img img {
  max-height: 35px; /* Ensure the image doesn't exceed the height of the navbar */
  vertical-align: middle; /* Align the image properly with the navbar items */
}
.comp-img {
  float: left;
  padding:12px;
}

.navbar {
  overflow: hidden;
  background-color: #111;
  font-family: Arial, Helvetica, sans-serif;
  height:60px; /* Set a fixed height for the navbar */
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding:21px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding:21px 16px;
  background-color: inherit;
  font: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: royalblue;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  padding:0;
  box-sizing: border-box;
  width: 100%;
  left: 0;
}

.dropdown-content .header {
  background: royalblue;
  padding: 16px;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: black;
  white-space: nowrap;
}

.column a {
  clear: both;
}

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

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

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
}

.column {
  flex: 1;
  background-color: #ccc;
  padding: 10px;
  box-sizing: border-box;
}

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

@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }

  .column {
    width: 100%;
  }
}