网站粘性导航问题：导航不固定+汉堡菜单无背景

一、粘性导航不生效的问题 #

你的.navhamburger已经设置了position: sticky和top: 0，但没生效主要是两个原因：

• 缺少z-index，滚动时被页面其他内容覆盖
• 若父元素存在overflow: hidden/auto属性，会直接导致sticky定位失效

修复代码：

.navhamburger{
    background-color: gray;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 100; /* 确保导航在页面最上层 */
    margin: 0; /* 移除默认边距避免布局偏移 */
    padding: 0 10px; /* 可选，给导航内容留点内边距 */
}

额外检查：确保.navhamburger的直接父元素没有设置overflow: hidden或overflow: auto，如果有直接删除该属性。

二、汉堡菜单展开无背景的问题 #

你的.nav设置了background-color: white但看不到，是因为position: fixed元素未指定定位坐标，且max-height取值范围不合理，加上菜单列表默认样式干扰了布局。

修复代码：

/* Nav menu */
.nav{
    width: 100%;
    height: 100vh; /* 改为100vh，确保占满整个视口高度 */
    position: fixed;
    top: 0; /* 固定定位坐标 */
    left: 0;
    background-color: white;
    overflow: hidden;
    max-height: 0;
    display: flex;
    align-items: center; 
    justify-content: center;
    transition: max-height 0.3s ease; /* 可选，添加过渡动画让展开更流畅 */
}

/* 重置菜单列表默认样式 */
.menu{
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu a{
    padding: 30px;
    color: black;
    text-align: center;
    margin: 0 auto;
    display: block; /* 改为block更适配垂直菜单布局 */
}

同时修改菜单展开的触发样式：

.side-menu:checked ~ nav{
    max-height: 100vh; /* 匹配视口高度，确保背景完全显示 */
}

修改后的完整CSS代码 #

/* Navigation */
.navhamburger{
    background-color: gray;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 100;
    margin: 0;
    padding: 0 10px;
}

/* Logo */
.logo{
    display: inline-block;
    color: white;
    font-size: 60px;
}

/* Nav menu */
.nav{
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: white;
    overflow: hidden;
    max-height: 0;
    display: flex;
    align-items: center; 
    justify-content: center;
    transition: max-height 0.3s ease;
}

.menu{
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu a{
    padding: 30px;
    color: black;
    text-align: center;
    margin: 0 auto;
    display: block;
}

.menu a:hover{
    opacity: 60%;
}

/* Menu Icon */
.hamburger{
    cursor: pointer;
    float: right;
    padding: 40px 20px;
}

.hamburger-line {
    background: black;
    display: block;
    height: 2px;
    position: relative;
    width: 24px;
}

.hamburger-line::before,
.hamburger-line::after{
    background: black;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}
.hamburger-line::before{
    top: 5px;
}
.hamburger-line::after{
    top: -5px;
}

.side-menu {
    display: none;
}

/* Toggle menu icon */
.side-menu:checked ~ nav{
    max-height: 100vh;
}
.side-menu:checked ~ .hamburger .hamburger-line {
    background: transparent;
}
.side-menu:checked ~ .hamburger .hamburger-line::before {
    transform: rotate(-45deg);
    top:0;
}
.side-menu:checked ~ .hamburger .hamburger-line::after {
    transform: rotate(45deg);
    top:0;
}

修改后，粘性导航会稳定固定在页面顶部，汉堡菜单展开后会显示完整的白色背景，菜单布局也更规整。

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