the overlay applies the whole page except side menu here is my header code
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snapp</title>
<link rel="stylesheet" href="../Assets/css/output.css">
<script src="//unpkg.com/alpinejs" defer></script>
</head>
<body dir="rtl">
<div x-data="dropdown" class="bg-white ">
<header
class="relative z-40 flex flex-row-reverse items-center justify-between h-16 px-5 xl:px-20 xl:h-24 xl:flex-row gap-x-6 xl:container xl:justify-start">
<img src="../Assets/imgs/snappTextLogo.svg" alt="snappTextLogo">
<div @click="toggle" class="xl:hidden">
<img x-show="!open" class="inline-block size-8" src="../Assets/imgs/menuIcon.svg" alt="menuIcon-bars">
<img x-show="open" class="inline-block size-8" src="../Assets/imgs/closeIcon.svg" alt="closeIcon">
</div>
<ul x-show="open"
class="max-w-[500px] w-full h-screen xl:hidden flex flex-col bg-white text-slate-500 *:p-4 absolute top-[64px] right-0 border-t">
<li>item1</li>
<li>item2</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
<ul class="hidden xl:flex xl:gap-x-9 text-slate-500">
<li>item1</li>
<li>item2</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</header>
<div @click="closeToggle" x-show="open" class="absolute inset-0 z-20 w-full h-screen xl:hidden bg-black/50">
<!-- This is for overlay -->
</div>
</div>
I want to overlay or that black effect doesn't apply on the header section. I have tried changing z-index, moving overlay division out of header tag etc.