What is wrong with my Java? (Icon is not triggering the function.) : Okay so this is basically exactly the code from https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
I have everything working except for some reason I cannot get the hamburger icon to load the other menu links when clicked... I've tried everything and have stared at it till my eyes are square, any suggestions would be greatly appreciated.

My HTML:
        
         <body style= margin:20%;>
         <link rel="stylesheet" type="text/css" href="PeterPanStyle.css"> 
         

        <div class="topnav" id="myTopnav">
             <a href="Cover.html">Home</a>
             <a href="About.html"> About</a>
             <a href="XContents.html"> Contents</a>
             <a href="#">Glossary </a>
             <a href="#">Quiz! </a>
             <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
       
         </div>
    <script>
    function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += "responsive";
    } else {
        x.className = "topnav";
    }
    </script>

My CSS:

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

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

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

    .topnav .icon {
    display: none;
    }

    @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 .icon {
      position: absolute;
      right: 0;
      top: 0;
       }
      .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    }

     }

