Search code examples
cssreactjsnext.jsoverflowmantine

Why does my burger dropdown hide behind other content?

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.

enter image description here

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: enter image description here

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?

Solution

  • Modifying the useStyles above with zIndex: 9999, did the trick.