When looking at my menu in responsive mode (iPhone SE FWIW), my burger menu items are all hidden except for the one that fits in the whitespace between my header and the main content.
I'm using Mantine and NextJS, and my overall layout seems simple enough:
return (
<html lang="en">
<body>
<Providers>
<HeaderMenu links={headerLinks}/>
<div>
{children}
</div>
<FooterCentered links={footerLinks} />
</Providers>
</body>
</html>
);
The header itself is something I copied from the Mantine dev docs, and made some modfications to it:
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)
}
const items = links. Map((link) => {
const menuItems = link.links?.map((item) => (
<Menu.Item key={item. Link}>
<Link href={item.link} passHref className={classes. Link}>
{item. Label}
</Link>
</Menu.Item>
));
if (menuItems && link.links?.length > 0) {
return (
<Menu key={link.label} trigger="hover" exitTransitionDuration={0}>
<Menu.Target>
<a
key={link. Label}
href={link. Link}
className={classes. Link}
onClick={(event) => event.preventDefault()}
>
<Center>
<span className={classes.linkLabel}>{link. Label}</span>
<IconChevronDown size={12} stroke={1.5} />
</Center>
</a>
</Menu.Target>
<Menu.Dropdown>{menuItems}</Menu.Dropdown>
</Menu>
);
}
return (
<Menu key={link.label} trigger="hover" exitTransitionDuration={0}>
<Menu.Target>
<Link href={link.link} passHref className={classes. Link}>
<Center>
<span className={classes.linkLabel}>{link. Label}</span>
</Center>
</Link>
</Menu.Target>
<Menu.Dropdown>{menuItems}</Menu.Dropdown>
</Menu>
);
});
return (
<Header height={HEADER_HEIGHT} mb={28}>
<Container>
<div className={classes. Inner}>
<RoboLogo width={28} height={28} />
{/* <MantineLogo size={28} /> */}
<Group>
<Group spacing={5} className={classes. Links}>
{items}
</Group>
<SearchBox searchFunction={handleSearch} />
{/* icon={<IconSearch size={16} stroke={1.5} />} */}
</Group>
<Burger opened={opened} onClick={toggle} className={classes. Burger} size="sm" />
<Transition transition="pop-top-right" duration={200} mounted={opened}>
{(styles) => (
<Paper className={classes.dropdown} withBorder style={styles}>
{items}
</Paper>
)}
</Transition>
</div>
</Container>
</Header>
);
}
When I'm in full desktop mode, I don't have an issue: 
From reading other article about a zIndex, I tried adding this but it didn't seem to do anything:
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',
},
},
What am I missing here?
