移动端响应式导航栏Checkbox触发失效问题求助

问题核心 #

你的导航栏无法展开的关键原因是缺少Checkbox选中状态下的菜单显示逻辑，同时移动端菜单的样式设置存在适配问题，导致点击按钮后没有视觉反馈。

修复方案及代码调整 #

1. HTML调整

把Checkbox从<label>内部移出，避免点击区域被遮挡，同时补上之前缺失的</div>闭合标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="styles.css">
    <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'>
    <title>JUST GODDAMN WORK</title>
    
</head>
<body>
    <header>
    <nav>
        <input type="checkbox" id="check" role="button">
        <label for="check" class="checkbtn">
            <i class="fa fa-bars"></i>
        </label>
        <h1 class="logo">
            GRAPHICAL STUDIOS
        </h1>
        <div class="nav-links">
        <ul>
            <li><a href="">HOME</a></li>
            <li><a href="projects.html">PROJECTS</a></li>
            <li><a href="">ABOUT</a></li>
        </ul>
        </div>
    </nav>
</header>
    <div class="image">
        <img class="main-image"  src="7510724.png" alt="">
        <h1 class="heading">
            DESIGNS THAT FEAL<br>
            AS GOOD AS THEY<br>
            LOOK
        </h1>
        <p>WE MAKE THE DESIGNS THAT STAND OUT TO THE AUDIENCE WHICH IN TURN HELP YOUR BRAND GROW!
           IF YOU ARE IN NEED OF ANY TYPE OF DESIGN, FEEL FREE TO CONTACT US ON FIVERR.WE MAKE THE DESIGNS THAT STAND OUT TO THE AUDIENCE WHICH IN TURN HELP YOUR BRAND GROW!
           IF YOU ARE IN NEED OF ANY TYPE OF DESIGN, FEEL FREE TO CONTACT US ON FIVERR.
        </p>
        <a class="button" href="https://www.fiverr.com/studio6graphic">
            CONTACT NOW!
        </a>
    
    </div>

</body>
</html>

2. CSS核心修复

重点修改移动端媒体查询部分，添加Checkbox选中触发逻辑，优化菜单样式：

*{
    margin: 0;
    padding: 0;
}
nav{
    height: 6cqw;
    width: 100%;
    background-color: #FCCE29;
    align-items: center;
    position: relative; /* 让绝对定位的菜单以nav为参照 */
}
.logo{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 3cqw;
    font-weight: 1000;
    color: aliceblue;
    padding-top: 1.2vw ;
    margin-left: 2vw;
}
a{
    color: aliceblue;
    text-decoration: none;
}
ul{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    list-style: none;
    display: flex;
    margin-top: -2.5vw;
    column-gap: 2vw;
    font-size: 1.5vw;
    font-weight: 600;
    float: right;
    margin-right: 30px;
}
nav li a:hover{
    background-color: #ffab35;
    border-radius: 5px;
    transition: all .5s;
    padding: 0.5vw 1vw;
}

.main-image{
    display: flex;
    float: right;
    max-width: 60vw;
    margin-top: 10vw;
    position: relative;
}
@media screen and (max-width:660px){
    .main-image{
        align-items: center;
        justify-content: center;
        float: none;
        margin-left: 5vw;
        margin-right: 5vw;
        margin-top: 10vw;
        margin-bottom: -20vw;
        max-width: 80vw;
    }
}

.image{
    overflow: hidden;
}
.heading{
    font-family: "Oswald";
    font-weight: 900;
    font-size: 70px;
    margin-left: 5vw;
    margin-right: 5vw;
    margin-top: 115px;
    line-height: 85px;
}
p{
    font-family: "Oswald";
    margin-top: 60px;
    margin-left: 5vw;
    margin-right: 5vw;
    font-size: 15px;
}
.button{
    margin-top: 60px;
    border-radius: 5px;
    font-size: 15px;
    color: black;
    font-family: "Oswald";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 5vw;
    height: 6vh;
    width: 17vh;
    background-color: #FCCE29;
}

.img-one{
    width: 35vw;
    margin: 10px;
    padding: 10px;
    padding-left: 200px;
    padding-top: 100px;
    display: flex;
    float: left;
    justify-content: center;
    align-self: center;
}
.img-two{
    width: 35vw;
    margin: 10px;
    padding: 10px;
    padding-right: 200px;
    padding-top: 100px;
    display: flex;
    float: right;
    justify-content: center;
    align-self: center;
}
.checkbtn{
    display: none;
}
#check{
    display: none;
}
@media screen and (max-width:796px) {
    .checkbtn{
        display: block;
        font-size: 5vw;
        color: #fff;
        float: right;
        margin-right: 2vw;
        margin-top: 1vw;
        cursor: pointer;
    }  
    ul {
        position: absolute;
        left: -100%;
        top: 100%;
        width: 100%;
        height: auto;
        background-color: #eec533;
        flex-direction: column;
        padding: 2vw 0;
        transition: all .5s ease;
        gap: 2vw;
    }
    /* 核心：Checkbox选中时显示菜单 */
    #check:checked ~ .nav-links ul{
        left: 0;
    }
    nav li a{
        padding: 1vw 2vw;
        display: block;
        text-align: center;
    }
    nav{
        height: 8vh;
    }
    .logo{
        font-size: 5vw;
        padding-top: 1.5vh;
    }
}

关键修改说明 #

1. 触发逻辑：新增#check:checked ~ .nav-links ul选择器，当Checkbox被选中时，将菜单从左侧滑入可视区域。
2. 移动端布局：把菜单改为垂直排列，高度设为auto适配内容，避免挤压。
3. 交互优化：放大汉堡按钮字体，增加菜单链接内边距，提升移动端点击体验。
4. 定位修正：给nav添加相对定位，确保菜单不会脱离导航栏布局。

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