EVOLUTION-NINJA

Edit File: header.js

function loadHeader() {
  const headerHTML = `
    
    <div style="background-color: #fff4c9; padding: 9px;">
      <div class="mainHeader container d-flex justify-content-between align-items-center flex-wrap">
        <div class="contactbox">
          <img src="images/mail.png" alt="Email Icon" style="margin-right: 8px;">
          <a href="mailto:aswiniagro@gmail.com">aswiniagro@gmail.com</a> |
          <a href="mailto:contact@aswiniagrotech.com">contact@aswiniagrotech.com</a>
        </div>

<header class="container">
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid nav-cont">
          
          <a href="index.html">
            <img src="images/ASWINI AGROTECH1.png" class="logoimg" alt="Aswini Agrotech Logo">
          </a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

<div class="collapse navbar-collapse mainbar" id="navbarNavDropdown">
            <ul class="navbar-nav ">
              <li class="nav-item">
                <a class="nav-link headerlinks" href="index.html">Home</a>
              </li>

<li class="nav-item dropdown">
                <a class="nav-link headerlinks dropdown-toggle" href="#" role="button"
                  data-bs-toggle="dropdown" aria-expanded="false">Products</a>

<ul class="dropdown-menu">
                  
                  <li class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">Cocopeat Products</a>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="SGB.html">Seed Germination Cocopeat bricks (SGB)</a></li>
                      <hr>
                      <li><a class="dropdown-item" href="WSG.html">Seed Germination Wet Cocopeat (WSG) Bags</a></li>
                    </ul>
                  </li>

<li class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">Treatment Products</a>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="AwinSampoorn.html">Awin Sampooran</a></li>
                        <hr>
                      <li><a class="dropdown-item" href="AwinMagic.html">Awin Magic</a></li>
                        <hr>
                      <li><a class="dropdown-item" href="AwinWonder.html">Awin Wonder</a></li>
                    </ul>
                  </li>
                </ul>
              </li>

<li class="nav-item">
                <a class="nav-link headerlinks" href="ContactUs.html">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
  `;

// Add header content to top of body
  document.body.insertAdjacentHTML("afterbegin", headerHTML);

// Enable multi-level dropdown toggle behavior
  document.querySelectorAll(".dropdown-submenu > a").forEach(function (submenuLink) {
    submenuLink.addEventListener("click", function (e) {
      e.preventDefault();
      e.stopPropagation();
      const nextMenu = this.nextElementSibling;
      if (nextMenu) {
        nextMenu.classList.toggle("show");
      }
    });
  });
}

// Load header after DOM is ready
document.addEventListener("DOMContentLoaded", loadHeader);