Lists in navigation bar would not hide itself when responsive hamburger menu appears in small screen

I'm trying to create a responsive navigation bar for mobile users. Basically, I want the lists in the navigation bar to hide itself in small screen and the lists will be hidden inside hamburger menu.

When hamburger menu shows up in small screen, I want the menu lists to go inside it, but I'm having issue of finding the answer..

Here is my HTML

<div class="top">
      <div class = "center">
        <h><a href="home.html">J[a]son</a></h>
        <p>Personal Blog</p>
      </div>
      <nav class = "top_child">
        <div class = "logos">
          <a href="https://github.com/j-ahn94" target="_blank" class="fa fa-github"></a>
          <a href="https://stackoverflow.com/users/14266888/jason-a" target="_blank" class="fa fa-stack-overflow"></a>
          <a href="https://www.linkedin.com/in/jasonja-ahn/" target="_blank" class="fa fa-linkedin"></a>
        </div>
        <div class = "nav" id="myTopnav">
          <ul>
            <li><a href="home.html">HOME</a></li>
            <li><a href="">PHOTOGRAPHY</a>
              <ul class="photography_1">
                <li><a href="photography_colour.html">Colour</a></li>
                <li><a href="photography_black.html">Black</a></li>
              </ul>
            </li>
            <li><a href="coding.html">CODING</a></li>
            <li><a href="about.html">ABOUT</a></li>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
              <i class="fa fa-bars"></i>
            </a>
          </ul>
        </div>
      </nav>
    </div>

Here is my CSS

.top {
    margin: auto;
    /*padding: 0.5em;*/
    padding-top: 0.5em;
    padding-right: 0.5em;
    padding-left: 0.5em;
    background-color: black;
    top: 0;
    display: block;
    position: sticky;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    z-index: 100;
    clear: both;
}

.top p {
    color: white;
    font-size: 10px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

.center {
    text-align: center;
}

.center a{
    color: rgb(224, 224, 228);
    font-size: 1.5em;
}

.center a:hover{
    text-decoration: none;
    color: rgb(224, 224, 228);
}

.nav {
    float: right;
    position: relative;
    list-style: none;
    display: block;
}

.nav a {
    color: white;
}

.nav li {
    display: inline;
    list-style: none;
    position: relative;
    overflow: hidden;
}

.nav .icon {
    display: none;
}

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

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

Here is my JavaScript

function myFunction() {
    var x = document.getElementById("mynav");
    if (x.className === "nav") {
      x.className += " responsive";
    } else {
      x.className = "nav";
    }
  }