1#@!#!123s

https 1#@!#!123s
: / home5 / ragvieco / public_html /
Filename : header.php
back
<style>
    /* ✅ Fixed Full-Width Header */
.ps-header {
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  height: 90px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  box-sizing: border-box;
}

/* ✅ Logo */
.ps-header .ps-logo img {
  width: 180px;
  height: auto;
  border-radius: 12px;
  margin-top: 5px;
}

/* ✅ Body */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f8f9fa;
  padding-top: 90px;
}

/* ✅ Desktop Navigation - Right Aligned */
.ps-header__center {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ps-header__center ul.menu {
  display: flex;
  gap: 25px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ps-header__center ul.menu li {
  position: relative;
}

.ps-header__center ul.menu li a {
  color: #000;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: color 0.3s ease;
}

.ps-header__center ul.menu li a:hover {
  color: #007bff;
}

/* ✅ Mega Menu */
.has-mega-menu:hover .mega-menu {
  display: block;
}

.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  padding: 15px;
  min-width: 600px;
  z-index: 999;
  border-radius: 6px;
}

/* ✅ Categories Grid in Mega Menu */
.ps-category--menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Change to repeat(3, 1fr) for 3 per row */
  gap: 15px;
}

.ps-category__item {
  text-align: center;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 10px;
  transition: 0.3s;
}

.ps-category__item:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}

/* ✅ Category Image */
.ps-category__thumbnail {
  position: relative;
  margin-bottom: 8px;
}

.ps-category__thumbnail img.ps-category__image {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 4px;
}

.ps-category__name a {
  color: #000;
  font-size: 14px;
  text-decoration: none;
  font-weight: bold;
}

.ps-category__name a:hover {
  color: #007bff;
}

/* ✅ Hamburger Menu (Mobile Only - Right Side) */
.menu-toggle {
  font-size: 28px;
  color: #000;
  background: none;
  border: none;
  cursor: pointer;
  display: none;
  margin-left: auto;
}

/* ✅ Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -260px;
  width: 260px;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
  padding: 20px;
  transition: right 0.3s ease;
  z-index: 10000;
  overflow-y: auto;
  display: none; /* ✅ Hidden by default */
}

.mobile-menu.active {
  display: block;
  right: 0;
}

.mobile-menu a {
  display: block;
  text-decoration: none;
  color: #000;
  font-size: 16px;
  margin-bottom: 15px;
  font-weight: bold;
  transition: color 0.3s ease;
}

.mobile-menu a:hover {
  color: #007bff;
}

/* ✅ Overlay */
.menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9998;
}
.menu-overlay.active {
  display: block;
}

/* ✅ Responsive Rules */
@media (max-width: 1024px) {
  .ps-header__center {
    display: none; /* ✅ Hide desktop menu on mobile */
  }
  .menu-toggle {
    display: block; /* ✅ Show hamburger */
  }
  .mobile-menu {
    display: block; /* ✅ Allow mobile menu on small screens */
  }
  .mega-menu {
    position: static; /* ✅ Fix mega menu overflow on mobile */
    box-shadow: none;
    min-width: auto;
  }
  .ps-category--menu {
    grid-template-columns: repeat(2, 1fr); /* 2 per row on tablets */
  }
}

@media (max-width: 480px) {
  .ps-category--menu {
    grid-template-columns: 1fr; /* 1 per row on mobile */
  }
}

@media (min-width: 1025px) {
  .mobile-menu {
    display: none !important; /* ✅ Force hide in desktop */
  }
}

/* ✅ Full Width Banner Fix */
.full-width-banner {
  width: 100vw;
  margin: 0;
  margin-top: 50px;
  padding: 0;
}
.mega-menu {
  max-height: 350px; /* Adjust height as needed */
  overflow-y: auto;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #ccc transparent; /* Firefox */
}

/* ✅ For Webkit Browsers (Chrome, Edge, Safari) */
.mega-menu::-webkit-scrollbar {
  width: 6px;
}

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

.mega-menu::-webkit-scrollbar-thumb:hover {
  background: #999;
}

</style>
<header class="ps-header">
  <!-- ✅ Left Logo -->
  <div class="ps-logo">
    <a href="index.php"><img src="img/ragvilogo.png" alt="Logo"></a>
  </div>

  <!-- ✅ Right Desktop Menu -->
  <div class="ps-header__center">
    <ul class="menu">
      <li><a href="index.php">Home</a></li>
      <li class="has-mega-menu">
        <a href="#">Categories <i class="fa fa-chevron-down"></i></a>
        <div class="mega-menu">
          <div class="ps-category--menu">
            <?php
            $get_organic = mysqli_query($connect,"SELECT * FROM organic_menu") or die(mysqli_error());
            while($get_value = mysqli_fetch_array($get_organic)) {
              $organic_menu_id = $get_value['organic_menu_id'];
              $organic_menu = $get_value['organic_menu'];
              $organic_image = $get_value['organic_image'];
            ?>
            <div class="ps-category__item">
              <div class="ps-category__thumbnail">
                <a class="ps-category__overlay" href="sub_category.php?id=<?php echo $organic_menu_id; ?>">
                  <img src="img/icon/plus.svg" alt="" />
                </a>
                <img class="ps-category__image" src="admin/category/<?php echo $organic_image; ?>" alt="<?php echo $organic_menu; ?>" />
              </div>
              <h6 class="ps-category__name">
                <a href="shop-list.php"><?php echo $organic_menu; ?></a>
              </h6>
            </div>
            <?php } ?>
          </div>
        </div>
      </li>
      <li><a href="shop.php">Products</a></li>
      <li><a href="refund.php">Refund/Cancellations</a></li>
      <li><a href="contact-us-v1.php">Contact</a></li>
      <li><a href="shopping-cart.php"><span class="fa fa-shopping-cart"></span></a></li>
      
    </ul>
  </div>

  <!-- ✅ Right Hamburger (Mobile Only) -->
  <button class="menu-toggle" onclick="toggleMenu()">☰</button>
</header>

<!-- ✅ Mobile Slide Menu -->
<div class="mobile-menu" id="mobileMenu">
  <a href="index.php">Home</a>
  <strong style="margin-bottom:10px; display:block;">Categories</strong>
  <?php
  $get_organic = mysqli_query($connect,"SELECT * FROM organic_menu") or die(mysqli_error());
  while($get_value = mysqli_fetch_array($get_organic)) {
    $organic_menu_id = $get_value['organic_menu_id'];
    $organic_menu = $get_value['organic_menu'];
    $organic_image = $get_value['organic_image'];
  ?>
  <a href="sub_category.php?id=<?php echo $organic_menu_id; ?>">
    <img src="admin/category/<?php echo $organic_image; ?>" style="width:25px;height:25px;margin-right:6px;">
    <?php echo $organic_menu; ?>
  </a>
  <?php } ?>
  <a href="shop.php">Products</a>
  <a href="refund.php">Refund/Cancellations</a>
  <a href="contact-us-v1.php">Contact</a>
  <?php if($SESSION_registered_users_id != ''){ ?>
  <a href="logout.php?logout=logout">Logout</a>
  <?php } ?>
</div>
<div class="menu-overlay" id="menuOverlay" onclick="toggleMenu()"></div>

<script>
function toggleMenu() {
  document.getElementById("mobileMenu").classList.toggle("active");
  document.getElementById("menuOverlay").classList.toggle("active");
}
</script>