While viewing my menu on an iPhone SE in responsive mode, I noticed that all of my burger menu items are hidden except for the one that fits perfectly in the space between my header and main content.
https://i.sstatic.net/7K9FD.png
I am using Mantine with NextJS, and my layout structure appears to be straightforward:
return (
<html lang="en">
<body>
<Providers>
<HeaderMenu links={headerLinks}/>
<div>
{children}
</div>
<FooterCentered links={footerLinks} />
</Providers>
</body>
</html>
);
The header design itself was adapted from the Mantine developer documentation, with some modifications:
export function HeaderMenu({ links }: HeaderSearchProps) {
const [opened, { toggle }] = useDisclosure(false);
const { classes } = useStyles();
const router = useRouter();
const handleSearch = (args: string) => {
const searchUrl = '/search? Terms=' + args;
router. Push(searchUrl)
}
// more code snippets...
</Header>
);
}
Everything seems to work fine when in full desktop mode as seen here: https://i.sstatic.net/rMZRV.png
After reading other articles about zIndex, I attempted to add it to my code but unfortunately, it did not have any impact:
const useStyles = createStyles((theme) => ({
dropdown: {
position: 'absolute',
top: HEADER_HEIGHT,
left: 0,
right: 0,
zIndex: -1, // <-- this
borderTopRightRadius: 0,
borderTopLeftRadius: 0,
borderTopWidth: 0,
overflow: 'hidden',
[theme.fn.largerThan('sm')]: {
display: 'none',
},
},
Is there something crucial that I am overlooking?