作品集网站汉堡菜单点击无响应问题求助

各位大佬好！我正在搭建自己的作品集网站，目前卡在了汉堡菜单的交互上——点击汉堡图标后完全没有任何反应，菜单根本不会展开/收起，试了好几种办法都没解决，实在没头绪了来这儿求助！

我已经尝试过的方法： #

• 把FontAwesome的汉堡图标换成了普通图片，问题依旧
• 找ChatGPT咨询过解决方案，照着给出的步骤调整后还是没用
• 试过先通过ID获取菜单元素，之后又改成用类名重新获取，来回折腾还是没效果

我的代码片段： #

HTML部分：

<header>
  <img src="assets/img/blanclogo.png" class="logo" alt="logo-blanc">
  <nav>
    <ul class="navlist" id="navlist">
      <li><a href="#home" title="Accueil" class="active">Accueil</a></li>
      <li><a href="#logiciel" title="Mes logiciels">Mes compétences</a></li>
      <li><a href="#portfolio" title="Page liste portfolio">Portfolio</a></li>
      <li><a href="assets/pdf/CV.pdf" title="CV">CV</a> </li>
      <li><a href="#contact" title="formulaire">Me contacter</a></li>
    </ul>
  </nav>
  <i class="fa-solid fa-bars" id="menu-burger"></i>
</header>

JavaScript部分：

const header = document.querySelector('header');
const menuBurger = header.querySelector('#menu-burger');
const navList = header.querySelector('#navlist');

menuBurger.addEventListener('click', () => {
  menuBurger.classList.toggle('active');
  navList.classList.toggle('active');
});

navList.querySelectorAll('a').forEach((link) => {
  link.addEventListener('click', () => {
    menuBurger.classList.remove('active');
    navList.classList.remove('active');
  });
});

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