移动端汉堡菜单不显示，请求修复响应式头部问题

开发者阿泽

2026-8-20

移动端汉堡菜单无法显示的问题修复

问题说明

当窗口缩小至≤768px的移动端尺寸时，id为menu-bar的汉堡菜单（fas fa-bars图标）无法正常显示，已添加CSS媒体查询但问题依旧存在，需要实现响应式头部并解决该显示问题。

原始HTML代码

<div id="menu-bar" class="fas fa-bars"></div>
<div class="container-ring">
    <div class="ring"></div>
    <div class="ring"></div>
    <div class="ring"></div>
    <a href="#" class="logo"><span>T</span>ravel</a>
</div>

<nav class="navbar">
    <a href="index.html">home</a>
    <a href="about.html">about</a>
    <a href="Tour.html">tour</a>
    <a href="Blog.html">blog</a>
    <a href="contact.html">contact</a>
</nav>

<div class="icons">
    <i class="fas fa-search" id="search-btn"></i>
    <i class="fas fa-user" id="login-btn"></i>
</div>

<form action="#" class="search-bar-container">
    <input type="search" id="search-bar" placeholder="search here..." >
    <label for="search-bar" class=" fas fa-search"></label>
</form>

原始CSS代码

@media(max-width:768px){
#menu-bar{
    display: initial;

}
header .navbar{
    position: absolute;
    top:100%;right:0;left:0px;
    background:beige;
    border-top: .1rem solid rgba(255,255,.2);
    padding:1rem 2rem;
    display:block;
    width:70%;
    transition:1s ease;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
header .navbar.active{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

header .navbar a{
    display: block;
    border-radius:.5rem;
    padding:1.5rem;
    margin:1.5rem 0;
    background:crimson;
}
header .navbar a:hover{
background-color:rgba(232, 58, 107,.7);

}
header .navbar a:hover:after{
    display: none;
}
}

问题分析

CSS选择器失效：原始CSS使用header .navbar但HTML未将头部元素包裹在<header>标签内，导致样式无法生效
汉堡菜单缺少基础样式：全局未设置默认隐藏，媒体查询内仅设置display: initial，缺少位置、大小、颜色等视觉样式，即使显示也可能看不到
无菜单交互逻辑：缺少点击汉堡菜单切换导航栏展开/收起的JavaScript代码

修复步骤

将所有头部元素包裹在<header>标签内，确保CSS选择器能正确匹配：

<header>
    <div id="menu-bar" class="fas fa-bars"></div>
    <div class="container-ring">
        <div class="ring"></div>
        <div class="ring"></div>
        <div class="ring"></div>
        <a href="#" class="logo"><span>T</span>ravel</a>
    </div>

    <nav class="navbar">
        <a href="index.html">home</a>
        <a href="about.html">about</a>
        <a href="Tour.html">tour</a>
        <a href="Blog.html">blog</a>
        <a href="contact.html">contact</a>
    </nav>

    <div class="icons">
        <i class="fas fa-search" id="search-btn"></i>
        <i class="fas fa-user" id="login-btn"></i>
    </div>

    <form action="#" class="search-bar-container">
        <input type="search" id="search-bar" placeholder="search here..." >
        <label for="search-bar" class=" fas fa-search"></label>
    </form>
</header>

2. 完善汉堡菜单的CSS样式

在全局CSS中设置汉堡菜单默认隐藏，媒体查询内补充显示样式和视觉属性：

/* 全局样式：桌面端隐藏汉堡菜单 */
#menu-bar {
    display: none;
    cursor: pointer;
    font-size: 2rem;
    color: #333;
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    z-index: 1000;
}

/* 保留原有媒体查询代码，优化部分属性 */
@media(max-width:768px){
    #menu-bar{
        display: block; /* 替换initial为block，更明确 */
    }
    header .navbar{
        position: absolute;
        top:100%;
        right:0;
        left:0;
        background:beige;
        border-top: .1rem solid rgba(255,255,255,.2);
        padding:1rem 2rem;
        display:block;
        width:100%;
        transition: clip-path 1s ease;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    header .navbar.active{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    header .navbar a{
        display: block;
        border-radius:.5rem;
        padding:1.5rem;
        margin:1.5rem 0;
        background:crimson;
        color: white; /* 补充文字颜色，提升可读性 */
        text-align: center;
    }
    header .navbar a:hover{
        background-color:rgba(232, 58, 107,.7);
    }
    header .navbar a:hover:after{
        display: none;
    }

    /* 调整移动端图标位置，避免被汉堡菜单遮挡 */
    .icons {
        margin-right: 4rem;
    }
}

3. 添加JavaScript交互逻辑

给汉堡菜单添加点击事件，切换导航栏的active类实现展开/收起：

document.getElementById('menu-bar').addEventListener('click', function() {
    document.querySelector('.navbar').classList.toggle('active');
});

完整可运行代码示例

整合所有修改后的完整代码，确保包含Font Awesome图标库引入：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Travel Header</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<header>
    <div id="menu-bar" class="fas fa-bars"></div>
    <div class="container-ring">
        <div class="ring"></div>
        <div class="ring"></div>
        <div class="ring"></div>
        <a href="#" class="logo"><span>T</span>ravel</a>
    </div>

    <nav class="navbar">
        <a href="index.html">home</a>
        <a href="about.html">about</a>
        <a href="Tour.html">tour</a>
        <a href="Blog.html">blog</a>
        <a href="contact.html">contact</a>
    </nav>

    <div class="icons">
        <i class="fas fa-search" id="search-btn"></i>
        <i class="fas fa-user" id="login-btn"></i>
    </div>

    <form action="#" class="search-bar-container">
        <input type="search" id="search-bar" placeholder="search here..." >
        <label for="search-bar" class=" fas fa-search"></label>
    </form>
</header>

<script>
document.getElementById('menu-bar').addEventListener('click', function() {
    document.querySelector('.navbar').classList.toggle('active');
});
</script>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    position: relative;
    padding: 1rem 2rem;
    background: #fff;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}

#menu-bar {
    display: none;
    cursor: pointer;
    font-size: 2rem;
    color: #333;
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    z-index: 1000;
}

.container-ring {
    display: inline-block;
}

.logo {
    text-decoration: none;
    font-size: 2rem;
    font-weight: bold;
    color: #333;
}

.navbar {
    display: inline-block;
    margin-left: 2rem;
}

.navbar a {
    text-decoration: none;
    color: #333;
    margin: 0 1rem;
    font-size: 1.2rem;
}

.icons {
    float: right;
    margin-top: 0.5rem;
}

.icons i {
    font-size: 1.5rem;
    margin-left: 1rem;
    cursor: pointer;
    color: #333;
}

.search-bar-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #333;
    padding: 1rem;
    display: none;
}

.search-bar-container input {
    width: 100%;
    padding: 0.8rem;
    font-size: 1.2rem;
    border: none;
    outline: none;
}

.search-bar-container label {
    color: #fff;
    font-size: 1.5rem;
    position: absolute;
    right: 2rem;
    top: 1.2rem;
    cursor: pointer;
}

@media(max-width:768px){
    #menu-bar{
        display: block;
    }
    header .navbar{
        position: absolute;
        top:100%;
        right:0;
        left:0;
        background:beige;
        border-top: .1rem solid rgba(255,255,255,.2);
        padding:1rem 2rem;
        display:block;
        width:100%;
        transition: clip-path 1s ease;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    header .navbar.active{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    header .navbar a{
        display: block;
        border-radius:.5rem;
        padding:1.5rem;
        margin:1.5rem 0;
        background:crimson;
        color: white;
        text-align: center;
    }
    header .navbar a:hover{
        background-color:rgba(232, 58, 107,.7);
    }
    header .navbar a:hover:after{
        display: none;
    }

    .icons {
        margin-right: 4rem;
    }
}

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

移动端汉堡菜单不显示，请求修复响应式头部问题

问题说明 #

原始HTML代码 #

原始CSS代码 #

问题分析 #

修复步骤 #

1. 修正HTML结构，添加header容器 #

2. 完善汉堡菜单的CSS样式 #

3. 添加JavaScript交互逻辑 #

完整可运行代码示例 #

HTML #

CSS #