我正在尝试在我的网站中实现导航。但是，当我最小化浏览器以查看它是否显示汉堡图标时。它显示所有链接仍然存在。

HTML5代码：

<header>
   <nav class="topnav" id="navBar">
     <ul>
        <li><a href="#anchorHome">Welcome.</a></li>
        <li><a href="#anchorAbout">About Me.</a></li>
        <li><a href="#anchorResume">Blog and Projects.</a></li>
        <li><a href="#anchorContact">Contact Me & Social links.</a></li>
     </ul>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
        <i class="fa fa-bars"></i></a>
   </nav>
</header>

CSS3-媒体查询代码：

@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }


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

javaScript代码：

function myFunction() {
    var x = document.getElementById("navBar");
    if (x.classname === "topnav") {
      x.classname += " responsive";
    } else {
      x.classname = "topnav";
    }
  }

任何帮助将不胜感激！