Add a “hamburger” icon and expand/collapse to a div menu

I have a complex split menu created with DIVs. I have the design for the most part sorted out. When you shrink the page in the snippet you can see there is a media query and the navigation top bar shrinks down in a responsive manner to accommodate for mobile devices. What I need help with is adding a “Hamburger” icon to the upper right of the navigation once it shrinks down to a vertical nav, and use the icon to expand/collapse the nav. Here is a codepen you can work on.

.navcontainerhome {
  display: flex;
  flex-direction: row;
  float: left;
}

.navcontainerhome div {
  border: 1px solid black;
  padding: 5px;
}

.navcontainerfollow {
  display: flex;
  flex-direction: row;
  float: right;
}

.navcontainerfollow div {
  border: 1px solid black;
  padding: 5px;
}

.navcontainershare {
  display: flex;
  flex-direction: row;
  float: right;
}

.navcontainershare div {
  border: 1px solid black;
  padding: 5px;
}

.sharefollowtitlecelsize {
  min-width: 80px;
}

@media only screen and (max-width: 1520px) {

  .navcontainerhome {
    flex-direction: column;
    width: 100%;

    /*background-color: lightblue;   */
  }

  .navcontainerfollow {
    float: left;

    margin: 0 auto 0 auto;
    width: 100%;
    min-width: 0;
  }

  .navcontainershare {
    float: left;

    margin: 0 auto 0 auto;
    width: 100%;
    min-width: 0;
  }

  .sharefollowcelsize {
    width: 12.5%;
    text-align: center;
  }
}

<div class="navcontainerhome">
  <div>Home</div>
  <div>Donors</div>
  <div>Donate</div>
  <div>Gallery</div>
  <div>Directory</div>
  <div>About</div>
  <div>Contact</div>
  <div>Curate</div>
  <div>Stats</div>
</div>

<div class="navcontainerfollow">
  <div class="sharefollowtitlecelsize">FOLLOW</div>
  <div class="sharefollowcelsize">Get</div>
  <div class="sharefollowcelsize">IG</div>
  <div class="sharefollowcelsize">In</div>
  <div class="sharefollowcelsize">Red</div>
  <div class="sharefollowcelsize">Tel</div>
  <div class="sharefollowcelsize">Tik</div>
  <div class="sharefollowcelsize">Tru</div>
  <div class="sharefollowcelsize">X</div>
</div>
<div class="navcontainershare">
  <div class="sharefollowtitlecelsize">SHARE</div>
  <div class="sharefollowcelsize">Fb</div>
  <div class="sharefollowcelsize">Get</div>
  <div class="sharefollowcelsize">In</div>
  <div class="sharefollowcelsize">Pin</div>
  <div class="sharefollowcelsize">Red</div>
  <div class="sharefollowcelsize">Tel</div>
  <div class="sharefollowcelsize">Tru</div>
  <div class="sharefollowcelsize">X</div>
</div>

I tried the checkbox trick but could not get it to work.