移动端模式下navbar遮挡页面内容，该如何解决？

问题原因 #

• 移动端媒体查询里的导航栏类名大小写写错了，导致预设的定位规则没有生效
• 页面正文容器没有预留和导航栏高度对应的顶部间距，被固定在顶部的导航栏遮挡

解决方案 #

步骤1：给正文容器添加顶部内边距 #

你的导航栏固定高度为80px，给页面主内容容器添加对应高度的顶部内边距，就能直接避免内容被遮挡：

/* 方案A：直接给body加全局顶部内边距 */
body {
  padding-top: 80px;
}

/* 方案B：如果你的页面有单独的主内容容器，建议给容器加，避免影响其他全局样式 */
.main-content {
  padding-top: 80px;
}

步骤2：修正媒体查询内的类名错误 #

你原有代码的移动端媒体查询中，选择器写的是.NavbarItems（大写开头），但实际导航栏的类名是.navbar（小写开头），类名不匹配导致定位规则不生效，修改如下：

@media screen and (max-width: 960px) {
  /* 把原来的.NavbarItems替换为正确的类名.navbar */
  .navbar {
    position: relative;
  }

  /* 此处保留你原有的其他移动端样式代码即可，不需要额外改动 */
  .nav-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 90vh;
    position: absolute;
    top: 80px;
    left: -100%;
    opacity: 1;
    transition: all 0.5s ease;
  }

  /* 后续原有代码保持不变 */
}

可选验证步骤 #

如果修改后仍有异常，可以在移动端媒体查询内明确指定导航栏的sticky定位属性，确保不同浏览器的兼容性：

@media screen and (max-width: 960px) {
  .navbar {
    position: sticky;
    top: 0;
  }
}

内容的提问来源于stack exchange，提问作者Mr.Gomer