响应式导航栏列表隐藏失效求助：小于1170px/820px时不生效

问题说明 #

需要实现的响应式导航栏效果：

• 当屏幕宽度小于1170px时，隐藏导航栏的Home、Company等列表项以及action_btn，仅显示汉堡菜单（toggle_btn）
• 当宽度小于820px时，调整下拉菜单的位置

当前功能无法正常工作，以下是问题排查和修复方案：

核心错误分析 #

1. HTML结构缺失：导航列表项没有被包裹在带有.links类的<ul>标签中，导致CSS里的.navbar .links选择器无法匹配到元素，小屏幕下无法隐藏这些列表项。
2. 下拉菜单高度不足：原代码中.dropdown_menu.open的高度设为240px，不足以容纳7个列表项，会导致内容被截断。

修复后的完整代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
    integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="CSS.css">
    <title>Logistics</title>
</head>

<body>
    <header>
        <div class="navbar">
            <div class="logo"><a href='#'>Logistics</a></div>
            <!-- 补全结构：添加带有links类的ul包裹列表项 -->
            <ul class="links">
                <li><a href="#hero">Home</a></li>
                <li><a href="#company">Company</a></li>
                <li><a href="#suppliers">Suppliers</a></li>
                <li><a href="#calculation">Cost Calculation</a></li>
                <li><a href="#contact">Contact Us</a></li>
                <li><a href="#customers">Customer List</a></li>
            </ul>
            <a href="#" class="action_btn">Get Started</a>
            <div class="toggle_btn">
                <i class="fa-solid fa-bars"></i>
            </div>
        </div>

        <div class="dropdown_menu">
            <li><a href="#hero">Home</a></li>
            <li><a href="#company">Company</a></li>
            <li><a href="#suppliers">Suppliers</a></li>
            <li><a href="#calculation">Cost Calculation</a></li>
            <li><a href="#contact">Contact Us</a></li>
            <li><a href="#customers">Customer List</a></li>
            <li><a href="#" class="action_btn">Get Started</a></li>
        </div>
    </header>
    
    <script>
        const toggleBtn = document.querySelector('.toggle_btn')
        const toggleBtnIcon = document.querySelector('.toggle_btn i')
        const dropDownMenu = document.querySelector('.dropdown_menu')

        toggleBtn.onclick = function() {
            dropDownMenu.classList.toggle('open')
            const isOpen = dropDownMenu.classList.contains('open')
            // 修正class赋值方式，避免覆盖原有类名
            toggleBtnIcon.className = isOpen
            ? 'fa-solid fa-xmark'
            : 'fa-solid fa-bars'
        }
    </script>
</body>
</html>

CSS代码 #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

body {
    height: 100vh;
    background-color: #000;
    background-image: url(https://img.freepik.com/free-vector/background-realistic-abstract-technology-particle_23-2148431735.jpg?w=900&t=st=1694459240~exp=1694459840~hmac=10beaeb0a700fb1bae3d92486cbbecf8cd8542f92e1651063157cb509665e0ee);
    background-size: cover;
    background-position: center;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
}

a:hover {
    color: orange;
}

/*HEADER*/

header {
    position: relative;
    padding: 0 2rem;
}

.navbar {
    width: 100%;
    height: 60px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar .logo a {
    font-size: 1.5rem;
    font-weight: bold;
}

.navbar .links {
    display: flex;
    gap: 2rem;
}

.navbar .toggle_btn {
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    display: none;
}

.action_btn {
    background-color: orange;
    color: #fff;
    padding: 0.5rem 1rem;
    border: none;
    outline: none;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: scale 0.2 ease;
}

.action_btn:hover {
    scale: 1.05;
    color: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.action_btn:active {
    scale: 0.95;
}

/*DROPDOWN MENU*/

.dropdown_menu {
    display: none;
    position: absolute;
    right: 2rem;
    top: 60px;
    height: 0;
    width: 300px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    border-radius: 10px;
    overflow: hidden;
    transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 调整高度以容纳所有列表项 */
.dropdown_menu.open {
    height: 320px;
}

.dropdown_menu li {
    padding: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown_menu .action_btn {
    width: 100%;
    display: flex;
    justify-content: center;
}

/*RESPONSIVE DESIGN*/

@media (max-width: 1170px) {
    .navbar .links,
    .navbar .action_btn {
        display: none;
    }

    .navbar .toggle_btn {
        display: block;
    }

    .dropdown_menu {
        display: block;
    }
}

@media (max-width: 820px) {
    .dropdown_menu {
        left: 2rem;
        /* 优化宽度，贴合屏幕 */
        width: calc(100% - 4rem);
    }
}

修复要点说明 #

1. 补全HTML结构：给导航列表项添加<ul class="links">包裹，让CSS选择器能正确匹配并隐藏元素。
2. 调整下拉菜单高度：将.dropdown_menu.open的高度改为320px，确保所有列表项完整显示。
3. 优化小屏幕布局：820px断点处将下拉菜单宽度设为calc(100% - 4rem)，适配窄屏显示。
4. 修正脚本逻辑：修改汉堡菜单图标的class赋值方式，避免覆盖原有类名导致图标失效。

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