响应式汉堡导航图标不显示问题求助

嘿，我最近跟着教程做导航栏的响应式汉堡图标，用了HTML、CSS还有一点点JS，但是做到一半发现汉堡图标在页面上看不到——虽然用Firefox的开发者工具检查的时候能看到它的轮廓，但就是不显示出来。我把代码贴在下面了，第一次发帖不太懂规矩，要是格式不对还请见谅！

HTML代码 #

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flex no tutorial</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Oswald:wght@300;400&family=Roboto+Slab:wght@500;600&family=Work+Sans:wght@300;400&display=swap" rel="stylesheet">
</head>
<body>
    <div class="wrapper">
        <nav class="navbar">
            <div class="nav-content">
                <p class="logo"><h3 class="logo">K13-News</h3></p>
                <!--Hamburger nav-->
                <a href="#" class="toggle-button">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </a>
                <ul class="nav-links">
                    <li><a href="#">Home</a> </li>
                    <li><a href="#">Trending</a></li>
                    <li><a href="#">Today</a></li>
                    <li><a href="#">Politics</a></li>
                </ul>
            </div>
        </nav>
        <div class="columns">
            <div class="col col-50">
                <p><h3>Trump found innocent on allegations of murder!</h3> ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Nisl suscipit adipiscing bibendum est ultricies integer quis. Viverra justo nec ultrices dui sapien eget. Nisi vitae suscipit tellus mauris a diam maecenas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Donec ac odio tempor orci. Purus in massa tempor nec feugiat. Facilisi etiam dignissim diam quis. Dapibus ultrices in iaculis nunc sed augue lacus. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Libero id faucibus nisl tincidunt eget nullam non nisi. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. In cursus turpis massa tincidunt dui ut. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pellentesque adipiscing commodo elit at imperdiet dui accumsan. Diam maecenas sed enim ut sem viverra. Purus sit amet volutpat consequat.
                </p>
            </div>
            <div class="col col-50">
                <p>In nibh mauris cursus mattis molestie a iaculis. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Adipiscing elit ut aliquam purus sit. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Nascetur ridiculus mus mauris vitae ultricies leo integer malesuada. Sed felis eget velit aliquet. Adipiscing elit ut aliquam purus sit. Nec feugiat in fermentum posuere urna nec tincidunt. Parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer. Donec adipiscing tristique risus nec feugiat in. Pharetra diam sit amet nisl suscipit adipiscing. Malesuada fames ac turpis egestas maecenas pharetra convallis. Dui vivamus arcu felis bibendum ut tristique et egestas quis. Sagittis eu volutpat odio facilisis mauris sit amet massa. Mattis vulputate enim nulla aliquet porttitor lacus. Lacus vel facilisis volutpat est velit egestas dui id. Pharetra et ultrices neque ornare aenean euismod elementum. Orci eu lobortis elementum nibh tellus molestie nunc. Diam vulputate ut pharetra sit amet aliquam.</p>
            </div>
        </div>
    <!--End of wrapper div-->
    </div>
</body>
</html>

CSS代码 #

/* this is so that padding doesn't effect the size of elements*/
*, *::before, ::after {box-sizing:border-box }

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Oswald:wght@300;400&family=Roboto+Slab:wght@500;600&family=Work+Sans:wght@300;400&display=swap');

body{
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    /*obv the background color of whole page*/
    background-color: #201D1D;
    color: white;
}

.wrapper{
    margin:auto;
    margin:20px
}

/* logo section*/
h3.logo{
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: #011213;
}

li, a{
    text-decoration: none;
    list-style-type: none;
    font-family: 'Work Sans', sans-serif;
    /*color of the nav font*/
    color: #201D1D;
}

.nav-links li{
    display: inline-block;
    padding: 0px 10px;
}

.nav-links li a{
    transition: all 0.3s ease 0s;
}

/*hover color for nav font*/
.nav-links li a:hover{
    color:white;
    text-decoration: underline #201D1D 2px ;
    text-underline-offset: 5px;
}

/*flex container that controls the nav bar*/
.nav-content{
    display:flex;
    justify-content: center;
    align-items: center;
    background-color: #09ADC3;
    border-radius: 25px ;
    height: 8vh;
    margin-bottom: 20px;
}

.columns{
    display: flex;
    flex-wrap:wrap;
    align-items: center;
}

h3{
    font-family: 'Roboto Slab', serif;
}

.col{
    padding:10px;
}

.col-50{
    width:50%
}

@media  screen and (max-width:1000px) {
    .col-50{
        width:100%
    }
}

/*style for the hamburger menu which isn't working for some reason*/
.toggle-button{
    position:absolute;
    top:2rem;
    right:1rem;
    display:flex;
    flex-direction: column;
    justify-content:space-between;
    width: 31px;
    height:21px;
}

.toggle-button .bar{
    height:3px;
    width:100%;
    color:white;
    border-radius:10px;
}

问题分析与解决方案 #

看了你的代码，发现汉堡图标不显示的核心问题是CSS属性用错了：你给.bar设置了color:white，但这个属性是用来控制文字颜色的，而汉堡的条是块级元素，需要用background-color:white来设置背景色，这样才能让这些条显示出来！

另外还有几个小细节可以优化：

1. 你的box-sizing选择器写错了，应该是*, *::before, *::after，原代码里::after前面少了一个*，这样伪元素的盒模型样式不会生效；
2. HTML里<p class="logo"><h3 class="logo">K13-News</h3></p>不符合规范，段落标签里不能嵌套标题标签，建议直接改成<h3 class="logo">K13-News</h3>；
3. 汉堡按钮的top:2rem可能会和导航栏的高度重叠，你可以调整成top:1.5rem，让位置更合理。

修改后的.bar样式代码：

.toggle-button .bar{
    height:3px;
    width:100%;
    background-color:white; /* 替换原来的color属性 */
    border-radius:10px;
}

修改后的盒模型选择器：

*, *::before, *::after {box-sizing:border-box }

这样修改之后，汉堡图标应该就能正常显示啦！

备注：内容来源于stack exchange，提问作者imkmack