点击菜单图标时顶部常规navbar消失问题解决方案

顶部导航异常消失由三个样式缺陷导致：

• 侧边栏未设置固定定位，显示时会插入正常文档流挤占布局空间，同时未配置堆叠层级，和顶部固定导航产生渲染堆叠冲突
• 顶部固定导航未设置明确的堆叠优先级，也没定义固定定位的左偏移基准，渲染时容易被后续同级元素覆盖
• 顶部导航未设置固定高度，内部标题用绝对定位时会引发布局高度塌陷，导致导航区域渲染异常

无需调整原有JS交互逻辑，仅修改CSS样式即可实现预期效果，修改点如下：

• 给侧边栏添加固定定位，将其固定在页面左侧，设置堆叠层级低于顶部导航，既不占用文档流空间，也不会遮挡顶部导航
• 给顶部导航设置更高的堆叠层级，添加left: 0明确固定定位的偏移基准，设置最小高度避免布局塌陷
• 给body添加顶部内边距，避免页面主体内容被固定导航遮挡（体验优化项）
• 调整顶部标题的定位逻辑，用上下左右居中替代原有的margin-top定位，避免不同设备下标题错位

修复后完整CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  height: 1000vh;
  padding-top: 70px;
}

/* 顶部固定导航栏样式 */
.normal {
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 70px;
  z-index: 999;
}

.normal .normal-menu .menu-icon i {
  font-size: 30px;
  cursor: pointer;
  transition: all 0.4s ease;
  margin: 20px;
  color: white;
}

.normal .normal-menu .menu-icon i:hover {
  color: gray;
}

.normal .normal-menu .title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 30px;
  text-decoration: none;
}

/* 侧边栏样式 */
.sidebar {
  background: black;
  height: 100vh;
  padding: 30px;
  color: white;
  width: 300px;
  display: none;
  transition: all 0.4s ease-in;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 998;
}

.sidebar .navbar .logo a {
  text-decoration: none;
  color: white;
  font-size: 20px;
}

.sidebar .navbar .close-icon {
  float: right;
  font-size: 20px;
  transition: all 0.4s ease;
  cursor: pointer;
}

.sidebar .navbar .close-icon:hover {
  color: gray;
}

.sidebar .navbar .menu {
  margin-top: 100px;
}

.sidebar .navbar .menu li {
  list-style: none;
  border-radius: 10px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.4s ease;
}

.sidebar .navbar .menu li:hover {
  background: white;
  color: black;
}

.sidebar .navbar .menu li a {
  color: inherit;
  text-decoration: none;
}

原有HTML和JS代码不需要做任何修改，直接替换CSS即可实现效果：顶部导航始终固定在顶部全程可见，点击菜单图标仅弹出侧边栏，不会对顶部导航的展示造成任何影响。

内容的提问来源于stack exchange，提问作者Aaqil Abdullah