📄 File: app_header.php

Path: //home6/outerorb/dev.outerorbittech.com/oot/app_header.php

Size: 8.08 KB

Permissions: 0644

<header id="header" class="header d-flex align-items-center fixed-top">
  <div class="container position-relative d-flex align-items-center justify-content-between">

    <a href="<?= site_url; ?>" title="<?= COMPANY; ?>" class="logo d-flex align-items-center me-auto me-xl-0">
      <img src="<?= theme_url; ?>img/logo.png" title="<?= COMPANY; ?>" alt="<?= COMPANY; ?>">
    </a>

    <nav id="navmenu" class="navmenu">
      <ul>
        <li class="nav-wave"><a href="<?= site_url; ?>" title="Home">Home</a></li>
        <li class="nav-wave"><a href="<?= site_url; ?>/about-us.html" title="About Us">About Us</a></li>

        <style>
          .mega-parent {
            position: relative;
            font-family: var(--nav-font);
          }

          .mega-parent>a {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }

          .mega-parent i {
            transition: transform 0.3s ease;
          }

          .mega-menu {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #fff;
            padding: 14px 40px;
            display: none;
            flex-wrap: wrap;
            gap: 40px;
            border-radius: 0;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            z-index: 999;
            max-height: 450px;
            overflow-y: auto;
            width: 100vw;
            max-width: 1100px;
          }

          @media (min-width: 1025px) {
            .mega-parent:hover .mega-menu {
              display: flex;
            }
          }

          .mega-column {
            flex: 1 1 200px;
            min-width: 200px;
          }

          .mega-column a:hover {
            color: var(--accent-color);
          }

          .mega-column a:focus {
            color: var(--accent-color);
            padding: 0px;
          }

          .nav-head-cat {
            font-size: 14px;
            font-weight: 700;
            color: var(--surface-color);
            margin-bottom: 12px;
            display: block;
            padding: 0;
            cursor: default;
          }

          .nav-head-cat:hover {
            color: var(--surface-color);
          }

          .mega-column a {
            font-size: 14px;
            color: #333;
            text-decoration: none;
            padding: 4px 0;
            display: block;
            transition: 0.2s ease;
          }

          .mega-column a::before {
            content: "\203A";
            font-weight: bold;
            font-size: 20px;
            margin-right: 8px;
            color: var(--surface-color);
            transition: color 0.2s ease;
          }

          .nav-head-cat::before {
            content: none !important;
          }

          .mega-column a:hover::before {
            color: var(--font-black);
          }

          .mega-menu::-webkit-scrollbar {
            width: 6px;
          }

          .mega-menu::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 4px;
          }

          @media (max-width: 1024px) {
            .mega-menu {
              position: static;
              transform: none;
              width: 100%;
              max-width: 100%;
              flex-direction: column;
              max-height: none;
              overflow: visible;
              padding: 0;
              display: none;
            }

            .mega-menu.open {
              display: block;
            }

            .mega-column {
              min-width: 100%;
              padding: 10px 15px;
              margin: 0;
              border-bottom: 1px solid #eee;
            }

            .mega-column:last-child {
              border-bottom: none;
            }

            .mega-column a {
              padding: 6px 0;
              line-height: 1.4;
              border-bottom: 1px solid #f2f2f2;
            }

            .mega-column a:last-child {
              border-bottom: none;
            }

            .mega-parent i.rotated {
              transform: rotate(180deg);
            }
          }
        </style>



        <li class="dropdown nav-wave mega-parent">
          <a href="javascript:void(0)" class="mega-trigger">
            Our Services <i class="bi bi-chevron-down toggle-dropdown"></i>
          </a>


          <div class="mega-menu">
            <?php $header_query = mysqli_query($GLOBALS['dbconn'], "select catName,displayName,catID,parentID, catUrl from category_tbl where parentID='1' and status='Y' order by catOrder");
            while ($res_header_category = mysqli_fetch_assoc($header_query)) {
              $catID = $res_header_category['catID'];
              ?>
              <div class="mega-column">

                <div class="nav-head-cat"><?= $res_header_category['displayName']; ?></div>

                <?php $header_query1 = mysqli_query($GLOBALS['dbconn'], "SELECT catName, displayName, catID, parentID, catUrl
FROM category_tbl
WHERE parentID NOT IN (0,1,2) 
  AND parentID = '$catID' AND status='Y'
ORDER BY catOrder;");
                while ($res_header_category1 = mysqli_fetch_assoc($header_query1)) {
                  $catID1 = $res_header_category1['catID'];
                  ?>


                  <a href="<?= site_url; ?>/<?= $res_header_category1['catUrl']; ?>.html" title="<?= $res_header_category1['displayName']; ?>"><?= $res_header_category1['displayName']; ?></a>

                <?php }
                ; ?>
                
              </div>

            <?php }
            ; ?>


          </div>
        </li>

        <script>
          document.addEventListener("DOMContentLoaded", function () {
            const megaParent = document.querySelector(".mega-parent");
            const serviceLink = megaParent.querySelector(".mega-trigger");
            const megaMenu = megaParent.querySelector(".mega-menu");
            const arrowIcon = megaParent.querySelector("i");

            serviceLink.addEventListener("click", function (e) {
              if (window.innerWidth <= 1024) {
                e.preventDefault();
                megaMenu.classList.toggle("open");
                arrowIcon.classList.toggle("rotated");
              }
            });

            document.addEventListener("click", function (e) {
              if (window.innerWidth <= 1024 && !megaParent.contains(e.target)) {
                megaMenu.classList.remove("open");
                arrowIcon.classList.remove("rotated");
              }
            });

            window.addEventListener("resize", function () {
              if (window.innerWidth > 1024) {
                megaMenu.classList.remove("open");
                arrowIcon.classList.remove("rotated");
              }
            });
          });
        </script>



        <li class="dropdown nav-wave"><a href="javascript:void(0)">Partner <i
              class="bi bi-chevron-down toggle-dropdown"></i></a>
          <ul>

          <?php $header_query3 = mysqli_query($GLOBALS['dbconn'], "select catName,displayName,catID,parentID, catUrl from category_tbl where parentID='2' and status='Y' order by catOrder");
            while ($res_header_category3 = mysqli_fetch_assoc($header_query3)) {
              $catID3 = $res_header_category3['catID'];
              ?>

            <li><a href="<?= site_url; ?>/<?= $res_header_category3['catUrl']; ?>.html" title="<?= $res_header_category3['displayName']; ?>"><?= $res_header_category3['displayName']; ?></a></li>

<?php };?>

          </ul>
        </li>

        <li class="nav-wave"><a href="<?= site_url; ?>/gallery.html" title="Gallery">Gallery</a></li>
        <li class="nav-wave"><a href="<?= site_url; ?>/blog.html" title="Blogs">Blogs</a></li>
        <li class="nav-wave"><a href="<?= site_url; ?>/career.html" title="Careers">Careers</a></li>
      </ul>
      <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
    </nav>
    <a class="btn-getstarted" style="border: 1px solid white; padding: 9px 9px; gap: 0px;"
      href="<?= site_url; ?>/contact.html">
      Let's Connect<i class="fas fa-arrow-right" style="margin-left: 6px;"></i>
    </a>

  </div>
</header>

← Back to Directory Edit File 🔒 Chmod