缩小屏幕时Hamburger图标及导航链接不显示问题排查

问题分析与修复步骤： #

1. 汉堡菜单无内容且样式语法错误

.nav-toggle元素为空，同时color white存在语法错误（缺少冒号），导致菜单按钮完全不可见。

原错误代码（CSS）：

.nav-toggle {
  /* display: none; */
  font-size: 22px;
  cursor: pointer;
  color white;
}

修复后代码：

.nav-toggle {
  display: none;
  font-size: 22px;
  cursor: pointer;
  color: white;
}

同时在HTML的.nav-toggle中添加汉堡图标内容：

<div class="nav-toggle">☰</div>

2. 未绑定汉堡菜单点击事件

toggleMenu函数没有与.nav-toggle元素关联，点击汉堡按钮无法触发菜单切换逻辑。

修复方法（JavaScript）：
在JS中添加事件监听：

function toggleMenu() {
  console.log('Function called...');
  const navLinks = document.querySelector('.nav-links');
  navLinks.classList.toggle('open');
}

// 绑定点击事件
document.querySelector('.nav-toggle').addEventListener('click', toggleMenu);

3. 桌面端导航容器未设置默认显示方式

媒体查询中设置小屏幕下.nav-links为display: none，但桌面端未给.nav-links设置默认display属性，导致布局异常。

修复后代码（CSS默认样式）：

.nav-links {
  display: flex;
  align-items: center;
}

4. 小屏幕下导航链接样式优化

媒体查询中需调整链接文字颜色（避免深色背景下看不见），同时优化列表布局：

补充修复（CSS媒体查询）：

@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    background-color: #333;
    position: absolute;
    top: 60px;
    right: 0;
    left: 0;
    padding: 10px 0;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links ul {
    flex-direction: column;
    padding: 0 20px;
    width: 100%;
  }
  .nav-links li {
    margin: 10px 0;
    padding: 5px 0;
    margin-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .nav-links a {
    color: white;
  }
  .nav-toggle {
    display: block;
  }
}

完整修复后代码示例： #

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="css/navigation.css" />
  <link rel="stylesheet" href="css/main.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=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
  <title>Tax Corrector</title>
</head>

<body>
  <header class="header">
    <div class="logo">Tax Corrector</div>
    <div class="nav-toggle">☰</div>
    <nav class="nav-links">
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Register</a></li>
        <li><a href="#">Login</a></li>
      </ul>
    </nav>
  </header>
  <script src="main.js"></script>
</body>

</html>

CSS：

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333333;
  padding: 10px 20px;
  position: relative; /* 为绝对定位的子元素提供参考 */
}

.nav-links {
  display: flex;
  align-items: center;
}

.nav-links ul {
  list-style-type: none;
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
}

.nav-links li {
  margin-right: 25px;
  letter-spacing: 1.2px;
}

.nav-links a {
  text-decoration: none;
  font-weight: 200;
  color: black;
}

.logo {
  font-size: 20px;
  font-weight: 200;
  letter-spacing: 1.5px;
  color: black;
}

.nav-toggle {
  display: none;
  font-size: 22px;
  cursor: pointer;
  color: white;
  background-color: #333;
  padding: 5px 10px;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    background-color: #333;
    position: absolute;
    top: 60px;
    right: 0;
    left: 0;
    padding: 10px 0;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links ul {
    flex-direction: column;
    padding: 0 20px;
    width: 100%;
  }
  .nav-links li {
    margin: 10px 0;
    padding: 5px 0;
    margin-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .nav-links a {
    color: white;
  }
  .nav-toggle {
    display: block;
  }
}

JavaScript：

function toggleMenu() {
  console.log('Function called...');
  const navLinks = document.querySelector('.nav-links');
  navLinks.classList.toggle('open');
}

document.querySelector('.nav-toggle').addEventListener('click', toggleMenu);

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