AutoShell

jkghkghkghkghkghkghkghkkghghkkghkgh hgghkghkghghkghhgkhgkghghkkghkhghkgkghkghkgh hjlhlhjhjlhjlhjlhjlhjlhjlhjhjl AutoShell

?? Editing: header1.php

<!doctype html>
<html>

<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>MS Fabrics</title>

<link rel="apple-touch-icon" sizes="180x180" href="assets/img/fav-icons/apple-touch-icon.png">
	<link rel="icon" type="image/png" sizes="32x32" href="assets/img/M.S_LOGO1.png">
	<link rel="icon" type="image/png" sizes="16x16" href="assets/img/M.S_LOGO1.png">

<link rel="stylesheet" href="dependencies/bootstrap/css/bootstrap.min.css" type="text/css">
	<link rel="stylesheet" href="dependencies/fontawesome/css/fontawesome-all.min.css" type="text/css">
	<link rel="stylesheet" href="dependencies/owl.carousel/css/owl.carousel.min.css" type="text/css">
	<link rel="stylesheet" href="dependencies/owl.carousel/css/owl.theme.default.min.css" type="text/css">
	<link rel="stylesheet" href="dependencies/flaticon/css/flaticon.css" type="text/css">
	<link rel="stylesheet" href="dependencies/wow/css/animate.css" type="text/css">
	<link rel="stylesheet" href="dependencies/jquery-ui/css/jquery-ui.css" type="text/css">
	<link rel="stylesheet" href="dependencies/venobox/css/venobox.css" type="text/css">
	<link rel="stylesheet" href="dependencies/slick-carousel/css/slick.css" type="text/css">
	

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

<link rel="stylesheet" href="assets/css/app.css" type="text/css">

</head>

<header id="header" class="header-area">
			<div class="top-bar">
				<div class="container-fluid custom-container">
					<div class="row">
						<div class="col-lg-6">
							<div class="top-bar-left">
								<p><i class="far fa-flag"></i><a href="contact.php" >Our Location</a></p>

<p><i class="far fa-envelope"></i><a href="mailto:murugesanms70@yahoo.in " >murugesanms70@yahoo.in </a></p>
							</div>
						</div>
						
						<div class="col-lg-6">
							<div class="top-bar-right">
								<div class="social">
									<ul>
										<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
										<li><a href="#"><i class="fab fa-twitter"></i></a></li>
										<li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
										<li><a href="https://www.instagram.com/msfabricstup?utm_source=qr&igsh=bDRlM3A5bXh2M2Rx"><i class="fab fa-instagram"></i></a></li>
										<li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
										
									</ul>
								</div>
								
							</div>
							
						</div>
						
					</div>
					
				</div>
				
			</div>

<div class="col-lg-12 col-xl-7 order-lg-3 order-xl-2 menu-container">
						<div class="mainmenu style-two">
							
							<ul id="navigation">
							<li><a href="index.php">HOME</a></li>
							<li><a href="about.php">ABOUT</a></li>
					<?php
include "config.php";

function getTitle($conn, $id){
    $res = $conn->query("SELECT title FROM product_menu WHERE id=$id AND status=1");
    return $res->fetch_assoc()['title'] ?? '';
}
?>

<li class="has-child">
    <a href="#">PRODUCT</a>

<li class="has-child">
            <a href="product.php?id=1"><?= getTitle($conn, 1); ?></a>
            <ul class="sub-menu">
                <li><a href="product.php?id=2"><?= getTitle($conn, 2); ?></a></li>
                <li><a href="product.php?id=3"><?= getTitle($conn, 3); ?></a></li>
            </ul>
        </li>

<li class="has-child">
            <a href="product.php?id=4"><?= getTitle($conn, 4); ?></a>
            <ul class="sub-menu">
                <li><a href="product.php?id=6"><?= getTitle($conn, 6); ?></a></li>
            </ul>
        </li>

<li><a href="product.php?id=7"><?= getTitle($conn, 7); ?></a></li>
        <li><a href="product.php?id=8"><?= getTitle($conn, 8); ?></a></li>
           <li><a href="product.php?id=9"><?= getTitle($conn, 9); ?></a></li>
    </ul>
</li>

<li><a href="service.php" >SERVICES</a></li>			
				            <li><a href="contact.php" style="text-decoration:none;">CONTACT</a></li>
							</ul>

</div>
					</div>

</header>
		
		<style>
			/* NESTED DROPDOWN SUPPORT */
.sub-menu li {
    position: relative;
}

.sub-menu li .sub-menu {
    top: 0;
    left: 100%;
    display: none;
    position: absolute;
}

.sub-menu li:hover > .sub-menu {
    display: block;
}
/* FIX ONLY FIRST DROPDOWN ARROW GAP */
.sub-menu > li.has-child > a {
    padding-right: 22px !important;   /* reduce huge gap */
}

/* MOVE ARROW CLOSE TO TEXT */
.sub-menu > li.has-child > a::after {
    right: 8px !important;            /* arrow text-ku pakkathula */
    font-size: 11px;
}

</style>

<div class="col-7">
						<div class="accordion-wrapper">
							<a href="#" class="mobile-open"><i class="flaticon-menu-1"></i></a>
						</div>
					</div>
					
					<div class="col-5" >
						<div class="top-cart">
							<a href="index.php">
								<img src="assets/img/M.S_LOGO1.png" alt="" style="height:40px;width:60px;">
							</a>
						
								
								
							</div>
						</div>
					</div>
				</div>
				
			</div>
			
		</header>

<div class="accordion-wrapper">
    <div id="mobilemenu" class="accordion">
        
    </div>
</div>
<style>
/* ===== MOBILE MENU ===== */
#mobilemenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#mobilemenu li {
    border-bottom: 1px solid #e6e6e6;
}

#mobilemenu a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    text-decoration: none;
    color: #222;
    font-size: 14px;
}

/* IMPORTANT: override desktop dropdown behavior */
#mobilemenu .sub-menu {
    position: static !important;
    display: none;
    padding-left: 15px;
    background: #fafafa;
}

#mobilemenu li.open > .sub-menu {
    display: block;
}

/* dropdown arrow */
#mobilemenu .has-child > a::after {
    content: "\25BE"; /* ▼ */

font-size: 12px;
}
/* ðŸ”¥ FIX NESTED SUB-MENU COLLAPSING IN MOBILE */
#mobilemenu .sub-menu li .sub-menu {
    position: static !important;
    left: auto !important;
    top: auto !important;
}
/* ðŸ”¥ ALLOW MOBILE MENU TO EXPAND VERTICALLY */
#mobilemenu {
    overflow: visible !important;
}
#mobilemenu ul {
    height: auto !important;
    overflow: visible !important;
}

/* ðŸ”¥ FORCE SHOW MOBILE DROPDOWN â€“ OVERRIDE THEME */
#mobilemenu li.has-child.open > ul.sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}
#mobilemenu li.has-child.open ul.sub-menu li ul.sub-menu {
    display: block !important;
}
/* ðŸ”¥ REMOVE FAKE HEIGHT & GAPS IN MOBILE MENU */
#mobilemenu li {
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
}

#mobilemenu > ul > li > a {
    padding: 14px 16px; /* keep main items comfortable */
}

/* tighter spacing for nested items */
#mobilemenu .sub-menu > li > a {
    padding: 10px 20px !important;
    font-size: 13px;
}

/* REMOVE reserved height from theme */
#mobilemenu .sub-menu li {
    height: auto !important;
}
/* ===============================
   HARD RESET DESKTOP MENU ON MOBILE
   =============================== */
/* ===============================
   MOBILE MENU â€“ ISOLATED FIX
   =============================== */
@media (max-width: 991px) {

/* hide desktop menu */
    .mainmenu {
        display: none;
    }

/* mobile menu structure */
    #mobilemenu .sub-menu {
        display: none;
        position: static !important;
        padding-left: 15px;
        background: #fafafa;
    }

#mobilemenu li.open > .sub-menu {
        display: block;
    }

#mobilemenu li {
        height: auto !important;
        min-height: 0 !important;
    }

#mobilemenu a {
        padding: 14px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

#mobilemenu .has-child > a::after {
       content: "\25BE"; /* ▼ */

font-size: 12px;
    }
}

/* DESKTOP DROPDOWN â€“ RESTORE */
.mainmenu li:hover > .sub-menu {
    display: block;
    opacity: 1;
    visibility: visible;
}
/* ðŸ”¥ FINAL GAP FIX â€“ MOBILE ONLY */
@media (max-width: 991px) {

/* remove layout reservation */
    #mobilemenu li,
    #mobilemenu .has-child {
        position: static !important;
    }

/* remove any leftover spacing from theme */
    #mobilemenu .sub-menu {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

#mobilemenu .sub-menu > li {
        margin: 0 !important;
        padding: 0 !important;
    }
}
/* ðŸ”¥ FORCE-COLLAPSE CLOSED MOBILE SUBMENUS */
@media (max-width: 991px) {

/* when NOT open, the submenu must take ZERO space */
    #mobilemenu li.has-child:not(.open) > .sub-menu {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

/* when open, allow natural height */
    #mobilemenu li.has-child.open > .sub-menu {
        display: block !important;
        height: auto !important;
    }

/* ensure parent li doesnâ€™t reserve space */
    #mobilemenu li.has-child {
        margin-bottom: 0 !important;
    }
}

</style>

const desktopMenu = document.querySelector('#navigation');
    const mobileMenu  = document.querySelector('#mobilemenu');

if (!desktopMenu || !mobileMenu) return;

const clonedMenu = desktopMenu.cloneNode(true);
    clonedMenu.removeAttribute('id');
    mobileMenu.appendChild(clonedMenu);

mobileMenu.addEventListener('click', function (e) {

const link = e.target.closest('a');
        if (!link) return;

const parentLi = link.closest('li.has-child');
        if (!parentLi) return;

// 🔥 FIRST TAP → OPEN SUBMENU
        if (!parentLi.classList.contains('open')) {
            e.preventDefault();
            parentLi.classList.add('open');
        }
        // 🔥 SECOND TAP → ALLOW NAVIGATION (NO preventDefault)
    });
});
</script>

Path:

home / dhw4kgxay284 / public_html / test1.trymywebsites.com /

?? Editing: header1.php

Path:

?? Upload