移动端优先的响应式导航栏点击功能与CSS异常问题求助

大家好，我正在尝试实现一个移动端优先的响应式导航栏，参考了相关教程的思路。直接照搬教程代码是可以正常运行的，但改成移动端优先的媒体查询写法后就遇到了问题：

• 从移动端切换到平板/桌面端的显示是正常的，但汉堡图标的点击功能和对应的CSS样式存在异常，没法正常展开/收起导航菜单。

以下是我当前的代码：

JavaScript 代码 #

window.onload=function() {

  const x = document.getElementById("myTopnav");
  const burger = document.getElementById("burger");

  burger.addEventListener("click", () => {

    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
    
  });

};

CSS 代码 #

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: right;
  display: none;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 24px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
  display: block;
  float: left;

}

.topnav .icon {
  display: block;
}

.topnav.responsive a { 
  display: block;
}


/*  X-Small devices (portrait phones, less than 576px)
    No media query for `xs` since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .topnav a:not(:first-child) {display: block;}
  .topnav a.icon {
    float: right;
    display: none;
  }
}

@media (min-width: 768px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}

HTML 代码 #

<nav>
    <!-- Top Navigation Menu -->
    <div class="topnav" id="myTopnav">
      <a href="#home" class="active">Brand</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
      <a href="#" id="burger" class="icon">
        <svg width="35px" height="35px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.46447 20.5355C4.92893 22 7.28595 22 12 22C16.714 22 19.0711 22 20.5355 20.5355C22 19.0711 22 16.714 22 12C22 7.28595 22 4.92893 20.5355 3.46447C19.0711 2 16.714 2 12 2C7.28595 2 4.92893 2 3.46447 3.46447C2 4.92893 2 7.28595 2 12C2 16.714 2 19.0711 3.46447 20.5355ZM18.75 16C18.75 16.4142 18.4142 16.75 18 16.75H6C5.58579 16.75 5.25 16.4142 5.25 16C5.25 15.5858 5.58579 15.25 6 15.25H18C18.4142 15.25 18.75 15.5858 18.75 16ZM18 12.75C18.4142 12.75 18.75 12.4142 18.75 12C18.75 11.5858 18.4142 11.25 18 11.25H6C5.58579 11.25 5.25 11.5858 5.25 12C5.25 12.4142 5.58579 12.75 6 12.75H18ZM18.75 8C18.75 8.41421 18.4142 8.75 18 8.75H6C5.58579 8.75 5.25 8.41421 5.25 8C5.25 7.58579 5.58579 7.25 6 7.25H18C18.4142 7.25 18.75 7.58579 18.75 8Z" fill="#fff"></path> </g></svg>
      </a>
    </div>
</nav> 

希望有大佬能帮忙找出问题所在，非常感谢！

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