Mantine+NextJS响应式模式下汉堡下拉菜单被遮挡问题求助

问题说明 #

在iPhone SE这类小屏设备的响应式模式下，汉堡菜单只能显示页眉和主内容之间空白区域的部分，剩下的选项都被下方内容挡住了。我用的是Mantine + Next.js，相关代码及尝试过的修改如下：

整体布局代码 #

return (
  <html lang="en">
    <body>
        <Providers>
            <HeaderMenu links={headerLinks}/>
            <div>
                {children}
            </div>
            <FooterCentered links={footerLinks} />
        </Providers>
    </body>
  </html>
);

页眉组件代码 #

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} />
      <Group>
        <Group spacing={5} className={classes.links}>
            {items}
        </Group>
        <SearchBox searchFunction={handleSearch} />
      </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>
);
}

尝试过无效的样式修改 #

const useStyles = createStyles((theme) => ({
dropdown: {
    position: 'absolute',
    top: HEADER_HEIGHT,
    left: 0,
    right: 0,
    zIndex: -1, // 这里设置了-1但没用
    borderTopRightRadius: 0,
    borderTopLeftRadius: 0,
    borderTopWidth: 0,
    overflow: 'hidden',

    [theme.fn.largerThan('sm')]: {
      display: 'none',
    },
  },
}));

问题根源 #

你设的zIndex: -1完全搞反了——负数zIndex会让菜单跑到其他元素的下层，自然会被主内容、页脚挡住。另外，菜单用了position: absolute但没有相对定位的父容器，会相对于整个文档定位，位置逻辑也容易出问题。

修复步骤 #

1. 把zIndex改成正数：用Mantine主题内置的高层级zIndex（比如theme.zIndex.modal），或者直接设为100，确保菜单在所有内容之上。
2. 给页眉的内层容器加相对定位：让菜单的绝对定位相对于页眉，避免脱离文档流后乱跑。
3. 移除或调整overflow属性：overflow: hidden会截断超出的菜单内容，要么删掉，要么改成overflow-y: auto让菜单可滚动。
4. 可选：限制菜单最大高度：用calc(100vh - ${HEADER_HEIGHT}px)把菜单高度限制在视口剩余空间内，防止超出屏幕。

修改后的样式代码：

const useStyles = createStyles((theme) => ({
  dropdown: {
    position: 'absolute',
    top: HEADER_HEIGHT,
    left: 0,
    right: 0,
    zIndex: theme.zIndex.modal, // 改用高优先级zIndex
    borderTopRightRadius: 0,
    borderTopLeftRadius: 0,
    borderTopWidth: 0,
    overflow-y: auto, // 需要滚动时打开，不需要就删掉
    maxHeight: `calc(100vh - ${HEADER_HEIGHT}px)`, // 限制菜单最大高度

    [theme.fn.largerThan('sm')]: {
      display: 'none',
    },
  },
  inner: {
    position: 'relative', // 关键：给父容器加相对定位
    width: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
}));

最后检查主内容区域，如果主内容设置了position: relative和较高的zIndex，也要把主内容的zIndex调低（比如设为auto），避免和菜单层级冲突。

内容的提问来源于stack exchange，提问作者Bill Sambrone