how to show nav on click in hamburger

Question

I've recently started making a small website for my computer science lessons and I've got a problem. Everything was going well to a point. I wanted to use flexbox and media queries so I did but I also wanted to add a hamburger menu. I tried to make it in JavaScript but it does not work properly, actually, it does not work. Could anybody help me and direct me what is wrong there? in addition you could tell me if I can do it using only CSS and if it would be a good solution? thanks for all responses.

Codepen

function myFunction() {
  var x = document.getElementsByClassName("ham");
  if (x.style.display == "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

* {
  margin: 0;
  padding: 0;
}

body {
  background: white;
  font-family: 'Quicksand', sans-serif;
}

.nav {
  display: flex;
  background: red;
  box-shadow: 1px 1px 100px black;
  flex-wrap: wrap;
  align-content: flex-end;
}

.nav li:first-child {
  margin-right: auto;
}

.nav a {
  display: block;
  color: #fff;
  text-decoration: none;
  margin: 10px;
  padding: 20px;
  transition: 1.3s;
}

.art {
  padding-top: 30px;
  font-size: 25px;
}

.img {
  width: 100%;
  border: black solid 1px;
}

.nav li a:hover {
  transition: 1.3s;
  color: yellow;
}

.logo {
  background: #000;
  display: block;
  color: #fff;
  text-decoration: none;
}

nav ul {
  list-style-type: none;
}

.first-section article {
  margin-top: 100px;
  margin-bottom: 100px;
}

.first-section h2 {
  padding: 20px;
  margin: 25px;
}

.first-section {
  max-width: 1000px;
  margin: 0 auto;
}

.first-section article p {
  text-align: justify;
}

.media {
  width: 100%;
  margin: 100px 0 0 0;
}

.read-more:hover {
  color: darkblue;
}

.read-more {
  font-family: 'Quicksand', sans-serif;
  font-size: 20px;
  border: 0px;
  background: white;
  display: block;
}

.read-more a {
  text-decoration: none;
}

.media .parent {
  display: flex;
  flex-wrap: wrap;
}

.media .child {
  flex: 1;
  width: 100%;
  margin: 0 auto;
  height: 200px;
  text-align: center;
  vertical-align: middle;
}


/*HAMBURGER*/

div.al {
  width: 40px;
  position: absolute;
  right: 1em;
  top: 1em;
}

.hamburger {
  display: none;
  width: 40px;
  height: 35px;
  border: 0;
  border-top: 5px solid #ffffff;
  background: transparent;
  position: relative;
  transition: 0.3s transform linear;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-top: 5px solid #ffffff;
  transform: translateY(10px);
}

.hamburger::after {
  transform: translateY(25px);
  transition: 0.3s transform linear;
}

.hamburger:focus {
  transform: rotate(45deg) translateY(5px);
  border: none;
}

.hamburger:focus::after {
  transform: rotate(-90deg) translateX(-10px);
}

footer {
  width: 100%;
  text-align: center;
  bottom: 0;
  background: grey;
}

.fb {
  background: url(facebook.png) no-repeat top;
  height: 100%;
}

.tw {
  background: url(twitter.png) no-repeat top;
  height: 100%;
}

.gplus {
  background: url(google-plus.png) no-repeat top;
  height: 100%;
}

@media only screen and (max-width: 600px) {
  .nav {
    text-align: center;
    flex-direction: column;
  }
  .hamburger {
    display: block;
  }
  .parent {
    text-align: center;
    flex-direction: column;
  }
  .first-section {
    margin: 15px;
  }
  .art {
    font-size: 15px;
  }
  .ham {
    display: block;
  }
  .hamburger {
    display: block;
  }
  button.hamburger:focus li.ham {
    display: block;
  }
}

@media only screen and (max-width: 1050px) {
  .first-section {
    margin: 15px;
  }
}

<link href="https://fonts.googleapis.com/css?family=Quicksand:200,300,400" rel="stylesheet">
<div id="wrapper">
  <nav>
    <div class="al" onclick="myFunction()"><button class="hamburger"></button></div>
    <ul class="nav">
      <li>
        <a href="#" class="logo">
          <h1>logo</h1>
        </a>
        <li>
          <li class="ham"><a href="#">HOME</a></li>
          <li class="ham"><a href="#">O NAS</a></li>
          <li class="ham"><a href="#">OFERTA</a></li>
          <li class="ham"><a href="#">KONTAKT</a></li>
    </ul>
  </nav>
</div>
<section class="first-section">
  <article>
    <h2>„Zadbaj, by nie zabijał” – polski fanpage namawia, by nie wypuszczać kotów</h2>
    <img src="pr%C4%99gowany-kot-w-oknie-864x575.jpg" alt="" class="img">
    <br><br>
    <button class="read-more"><a href="art.html">Czytaj dalej...</a></button>
  </article>
  <article>
    <h2>Artykuł</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet lacinia lacus, quis euismod velit rhoncus sed. Donec quis magna dictum, volutpat felis eu, mattis augue. Nullam magna justo, gravida eu consequat sed, interdum ac nisl. Nulla eu
      venenatis urna. Curabitur consequat auctor tellus, id aliquet lectus ultricies id. Nam sit amet tortor vulputate, posuere elit vel, pretium eros. Proin risus tellus, blandit ut pharetra a, pretium in ipsum. Donec nunc magna, euismod quis vulputate
      sed, tristique eget nisi. Nam dui elit, tempus sed tempor in, tristique vel dolor. Nullam eu massa id enim vulputate imperdiet. Cras congue ipsum in lectus cursus accumsan. Cras eget dui euismod, imperdiet arcu molestie, eleifend libero. Aenean
      malesuada metus id consectetur efficitur. Praesent magna nulla, congue eget blandit quis, mattis porta eros. Cras et diam pulvinar, porttitor purus vitae, vestibulum sem. Fusce id eleifend nisl. <br><br> Vestibulum ante ipsum primis in faucibus
      orci luctus et ultrices posuere cubilia Curae; Nullam non lectus orci. Nullam mauris metus, interdum ac ornare vitae, bibendum quis odio. Mauris ex ex, finibus efficitur rutrum ut, faucibus quis sem. Nullam sit amet tortor consectetur, sagittis
      magna at, aliquam ligula. Etiam condimentum urna sollicitudin faucibus dictum. Mauris imperdiet ultricies interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin non magna rhoncus, dapibus mauris
      eu, porttitor neque. Duis aliquet rutrum augue id aliquet. Maecenas auctor tellus lorem, id efficitur libero congue bibendum. <br><br> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam non lectus orci.
      Nullam mauris metus, interdum ac ornare vitae, bibendum quis odio. Mauris ex ex, finibus efficitur rutrum ut, faucibus quis sem. Nullam sit amet tortor consectetur, sagittis magna at, aliquam ligula. Etiam condimentum urna sollicitudin faucibus
      dictum. Mauris imperdiet ultricies interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin non magna rhoncus, dapibus mauris eu, porttitor neque. Duis aliquet rutrum augue id aliquet. Maecenas
      auctor tellus lorem, id efficitur libero congue bibendum. <br><br>
    </p>
    <button class="read-more"><a href="#">Czytaj dalej...</a></button>
  </article>
  <article>
    <h2>Artykuł</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet lacinia lacus, quis euismod velit rhoncus sed. Donec quis magna dictum, volutpat felis eu, mattis augue. Nullam magna justo, gravida eu consequat sed, interdum ac nisl. Nulla eu
      venenatis urna. Curabitur consequat auctor tellus, id aliquet lectus ultricies id. Nam sit amet tortor vulputate, posuere elit vel, pretium eros. Proin risus tellus, blandit ut pharetra a, pretium in ipsum. Donec nunc magna, euismod quis vulputate
      sed, tristique eget nisi. Nam dui elit, tempus sed tempor in, tristique vel dolor. Nullam eu massa id enim vulputate imperdiet. Cras congue ipsum in lectus cursus accumsan. Cras eget dui euismod, imperdiet arcu molestie, eleifend libero. Aenean
      malesuada metus id consectetur efficitur. Praesent magna nulla, congue eget blandit quis, mattis porta eros. Cras et diam pulvinar, porttitor purus vitae, vestibulum sem. Fusce id eleifend nisl. <br><br> Vestibulum ante ipsum primis in faucibus
      orci luctus et ultrices posuere cubilia Curae; Nullam non lectus orci. Nullam mauris metus, interdum ac ornare vitae, bibendum quis odio. Mauris ex ex, finibus efficitur rutrum ut, faucibus quis sem. Nullam sit amet tortor consectetur, sagittis
      magna at, aliquam ligula. Etiam condimentum urna sollicitudin faucibus dictum. Mauris imperdiet ultricies interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin non magna rhoncus, dapibus mauris
      eu, porttitor neque. Duis aliquet rutrum augue id aliquet. Maecenas auctor tellus lorem, id efficitur libero congue bibendum. <br><br> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam non lectus orci.
      Nullam mauris metus, interdum ac ornare vitae, bibendum quis odio. Mauris ex ex, finibus efficitur rutrum ut, faucibus quis sem. Nullam sit amet tortor consectetur, sagittis magna at, aliquam ligula. Etiam condimentum urna sollicitudin faucibus
      dictum. Mauris imperdiet ultricies interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin non magna rhoncus, dapibus mauris eu, porttitor neque. Duis aliquet rutrum augue id aliquet. Maecenas
      auctor tellus lorem, id efficitur libero congue bibendum. <br><br>
    </p>
    <button class="read-more"><a href="#">Czytaj dalej...</a></button>
  </article>
  <article>
    <h2>Artykuł</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet lacinia lacus, quis euismod velit rhoncus sed. Donec quis magna dictum, volutpat felis eu, mattis augue. Nullam magna justo, gravida eu consequat sed, interdum ac nisl. Nulla eu
      venenatis urna. Curabitur consequat auctor tellus, id aliquet lectus ultricies id. Nam sit amet tortor vulputate, posuere elit vel, pretium eros. Proin risus tellus, blandit ut pharetra a, pretium in ipsum. Donec nunc magna, euismod quis vulputate
      sed, tristique eget nisi. Nam dui elit, tempus sed tempor in, tristique vel dolor. Nullam eu massa id enim vulputate imperdiet. Cras congue ipsum in lectus cursus accumsan. Cras eget dui euismod, imperdiet arcu molestie, eleifend libero. Aenean
      malesuada metus id consectetur efficitur. Praesent magna nulla, congue eget blandit quis, mattis porta eros. Cras et diam pulvinar, porttitor purus vitae, vestibulum sem. Fusce id eleifend nisl. <br><br> Vestibulum ante ipsum primis in faucibus
      orci luctus et ultrices posuere cubilia Curae; Nullam non lectus orci. Nullam mauris metus, interdum ac ornare vitae, bibendum quis odio. Mauris ex ex, finibus efficitur rutrum ut, faucibus quis sem. Nullam sit amet tortor consectetur, sagittis
      magna at, aliquam ligula. Etiam condimentum urna sollicitudin faucibus dictum. Mauris imperdiet ultricies interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin non magna rhoncus, dapibus mauris
      eu, porttitor neque. Duis aliquet rutrum augue id aliquet. Maecenas auctor tellus lorem, id efficitur libero congue bibendum. <br><br> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam non lectus orci.
      Nullam mauris metus, interdum ac ornare vitae, bibendum quis odio. Mauris ex ex, finibus efficitur rutrum ut, faucibus quis sem. Nullam sit amet tortor consectetur, sagittis magna at, aliquam ligula. Etiam condimentum urna sollicitudin faucibus
      dictum. Mauris imperdiet ultricies interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin non magna rhoncus, dapibus mauris eu, porttitor neque. Duis aliquet rutrum augue id aliquet. Maecenas
      auctor tellus lorem, id efficitur libero congue bibendum. <br><br>
    </p>
    <button class="read-more"><a href="#">Czytaj dalej...</a></button>
  </article>
</section>
<footer>
  <h2>Kuba Chimiak</h2>
  <p>2018</p>
  <section class="media">
    <div class="parent">
      <div class="child">
        <div class="fb"></div>
      </div>
      <div class="child">
        <div class="tw"></div>
      </div>
      <div class="child">
        <div class="gplus"></div>
      </div>
    </div>
  </section>
</footer>

Answer 1

You were close... I did some changes like adding google material font, and I got the hamburger up in the upper right corner. You should probably place it somewhere better

https://codepen.io/anon/pen/gBpbmJ

When you click it, it is followed by a function that says "jesus h hamburger". In real life, you would probably rather do something like have a menu slide in and out.

//this function should be replaced with some actual menu show/hide logic. 
function myFunction(){
  alert("jesus f hamburger");
}

I would also recommend to use a framework that fixes this kind of stuff for you. Maybe bootstrap would work?