移动端汉堡菜单在顶部及粘性模式下垂直对齐问题求助

你当前的CSS仅在粘性模式生效、顶部模式无效，是因为选择器优先级不足或顶部模式下header的样式存在其他覆盖。以下是两种可靠的解决方式：

方式一：使用Flex布局（推荐） #

这种方式无需手动计算边距，能自适应header高度，确保顶部和粘性模式下都垂直居中：

@media (max-width: 767px) {
  .banner .navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
  }

  /* 移除之前的margin设置避免冲突 */
  .banner.navbar.navbar-default.navbar-static-top button {
    margin-top: 0 !important;
  }
}

方式二：精准设置边距 #

如果坚持用margin，需要确保选择器覆盖所有状态的按钮：

@media (max-width: 767px) {
  /* 匹配所有状态下的汉堡按钮 */
  .banner .navbar-header .navbar-toggle {
    margin-top: 20px !important;
  }

  /* 若粘性模式需要不同边距，单独调整 */
  .banner.sticky .navbar-header .navbar-toggle {
    margin-top: 15px !important;
  }
}

说明 #

• 优先用flex布局，它能自动适配不同的header高度变化，避免后续样式调整出现问题。
• 添加@media (max-width: 767px)确保仅在移动端生效，不影响桌面端布局。

内容的提问来源于stack exchange，提问作者Molnar Istvan