导航栏透明、屏幕尺寸调整时左移问题求助，需固定顶部且响应式

问题根源分析 #

1. 导航栏透明：你给#header设置的background-color: 8888;是无效的颜色格式，浏览器无法识别，导致背景默认透明。
2. 导航栏收缩+固定定位失效：
   • position: fixed声明后少了分号，导致后面的top: 0;不生效，定位逻辑错误；
   • 固定定位元素默认宽度由内容决定，没设置width: 100%的话，屏幕缩小时会跟着内容收缩，留下空白；
   • 没给#header加box-sizing: border-box，padding会额外撑宽元素，导致横向滚动。

修复后的完整代码 #

CSS 代码

body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    color: white;
    box-sizing: border-box;
    background: #ADEFD1;
    /* 添加padding-top避免内容被固定导航栏遮挡 */
    padding-top: 100px;
}

section{
    height: 100px;
}

#header{
    display: flex;
    position: fixed; /* 修复语法错误，添加分号 */
    top: 0;
    left: 0; /* 确保从左侧开始，避免偏移 */
    width: 100%; /* 强制全屏宽度 */
    box-sizing: border-box; /* 让padding包含在宽度内 */
    justify-content: space-between;
    align-items: center;
    background-color: #888; /* 修复颜色值为有效格式 */
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    padding: 10px 20px; /* 用固定值替代百分比，避免小屏幕挤压 */
}

/* Navigation Bar*/
#nav-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0; /* 移除默认ul的margin */
    padding: 0; /* 移除默认ul的padding */
}

#nav-bar li{
    list-style: none;
    padding: 10px 15px;
}

#nav-bar li a{
    text-decoration: none;
    font-size: 25px;
    font-weight: 800;
    color: #1a1a1a;
    transition: 0.3s;
}

#nav-bar li a:hover{
    color: #088178;
}

#nav-bar li a.active{
    color: #088178;
}

#nav-bar li a.active::after{
    content: "";
    height: 3px;
    background: black;
    display: block;
    position: absolute;
    width: 60px; /* 给active的下划线设置宽度，避免全屏 */
    left: 10px; /* 调整位置对齐文字 */
}

#nav-bar li:after{
    content:"";
    width:0%;
    height: 3px;
    background: black;
    margin: auto;
    display: block;
    transition: 0.5s ease;
}

#nav-bar li:hover::after{
    width: 100%
}

.logo{
    height: 80px;
    width: 80px;
}

/* 小屏幕响应式调整 */
@media (max-width: 768px) {
    #nav-bar li a{
        font-size: 18px; /* 缩小字体避免换行挤压 */
    }
    .logo{
        height: 60px;
        width: 60px;
    }
}

HTML 代码

<body>
<section id="header">
    <a href="#"><img src="img/piram.png" class="logo" alt="Logo"></a>
    <div>
        <ul id="nav-bar">
            <li><a href="index.html" class="active">Home</a></li>
            <li><a href="shop.html">Shop</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="cart.html"><i class="fa-solid fa-cart-shopping"></i></a></li>
        </ul>
    </div>
</section>
<section>
    <h1>hey</h1>
</section>
<section>
    <h1>hey</h1>
</section>
<section>
    <h1>hey</h1>
</section>
</body>

关键修改说明 #

• 修复了background-color的无效值，让导航栏背景可见；
• 修正position: fixed的语法错误，添加left:0和width:100%确保导航栏全屏固定；
• 给#header添加box-sizing: border-box，避免padding撑宽元素；
• 给body添加padding-top，防止页面内容被固定导航栏遮挡；
• 添加媒体查询，在小屏幕下调整字体和logo大小，优化响应式表现；
• 移除了ul默认的margin和padding，避免导航栏布局偏移。

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