stacking fix

This commit is contained in:
Atreya Choudhury 2024-08-11 09:06:30 +02:00
parent bb81935f0c
commit 3c948ccdde
3 changed files with 10 additions and 4 deletions

View File

@ -9,7 +9,7 @@ import SearchButton from './SearchButton'
const Header = () => {
let headerClass = 'flex items-center w-full bg-white dark:bg-gray-950 justify-between py-10'
if (siteMetadata.stickyNav) {
headerClass += ' sticky top-0'
headerClass += ' sticky top-0 z-50'
}
return (

View File

@ -52,8 +52,9 @@ const MobileNav = () => {
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
unmount={false}
>
<div className="z-5 fixed inset-0 bg-black/25" />
<div className="fixed inset-0 z-60 bg-black/25" />
</Transition.Child>
<Transition.Child
@ -66,7 +67,7 @@ const MobileNav = () => {
leaveTo="translate-x-full opacity-0"
unmount={false}
>
<Dialog.Panel className="fixed left-0 top-0 z-10 h-full w-full bg-white opacity-95 duration-300 dark:bg-gray-950 dark:opacity-[0.98]">
<Dialog.Panel className="fixed left-0 top-0 z-70 h-full w-full bg-white opacity-95 duration-300 dark:bg-gray-950 dark:opacity-[0.98]">
<nav
ref={navRef}
className="mt-8 flex h-full basis-0 flex-col items-start overflow-y-auto pl-12 pt-2 text-left"
@ -84,7 +85,7 @@ const MobileNav = () => {
</nav>
<button
className="fixed right-4 top-7 z-20 h-16 w-16 p-4 text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
className="fixed right-4 top-7 z-80 h-16 w-16 p-4 text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
aria-label="Toggle Menu"
onClick={onToggleNav}
>

View File

@ -28,6 +28,11 @@ module.exports = {
primary: colors.pink,
gray: colors.gray,
},
zIndex: {
60: '60',
70: '70',
80: '80',
},
typography: ({ theme }) => ({
DEFAULT: {
css: {