Hamburger Icon toggle is not working

Question

I have a hamburger icon to the top of my website but the toggle for that is not working. I have change-1 class that is toggled when the icon is clicked but that is not happening. The console is also not showing any error. Please tell what might be the problem in this code.

function Main() {}
Main.prototype = {
  initPreloading: function() {
    window.addEventListener("load", function() {
      document.body.classList = "loaded";
    });
    document.querySelector(".block.hero").addEventListener("click", this.particleRibbons());
  },
  particleRibbons: function() {
    var c = document.getElementById("canvas__particles"),
      x = c.getContext("2d"),
      w = window.innerWidth,
      h = window.innerHeight,
      f = 180,
      q = [{}, {}],
      m = Math,
      r = 0,
      u = m.PI * 2,
      v = m.cos,
      z = m.random;
    c.width = w;
    c.height = h;
    x.globalAlpha = 0.7;

    function i() {
      w = window.innerWidth;
      h = window.innerHeight;
      x.clearRect(0, 0, w, h);
      q = [{
        x: 0,
        y: h * 1 + f
      }, {
        x: 0,
        y: h * 1 - f
      }]
      while (q[1].x < w + f) d(q[0], q[1])
    }

    function d(i, j) {
      x.beginPath()
      x.moveTo(i.x, i.y)
      x.lineTo(j.x, j.y)
      var k = j.x + (z() * 2 - 0.25) * f,
        n = y(j.y)
      x.lineTo(k, n)
      x.closePath()
      r -= u / -100
      x.fillStyle = '#' + (v(r) * 127 + 128 << 16 | v(r + u / 3) * 127 + 128 << 8 | v(r + u / 3 * 2) * 127 + 128).toString(16)
      x.fill()
      q[0] = q[1]
      q[1] = {
        x: k,
        y: n
      }
    }

    function y(p) {
      var t = p + (z() * 2 - 1.1) * f
      return (t > h || t < 0) ? y(p) : t
    }
    i();
    return i;
  },
  initMisc: function() {
    window.addEventListener("resize", this.particleRibbons);
  },
  navIcon: function() {
    $(".hamburger-icon").on("click", function() {
      $(".one").toggleClass("change-1");
    });
  },
  init: function() {
    Main.initPreloading(), Main.particleRibbons(), Main.initMisc(), Main.navIcon();
  }
};
var Main = new Main;
Main.init();


// burger animation

//$(".hamburger-icon").on("click", function(){
//    $(".one").toggleClass("change-1");
//})

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: 'PT Sans', sans-serif;
  background-color: #212121;
}

body.loaded {
  overflow-x: hidden;
}

.text-align-center {
  text-align: center
}

.vertical-align-helper {
  height: 100vh;
}

.vertical-align-helper:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-left: -5px;
}

.vertical-align-helper>[class*=vertical-align-] {
  display: inline-block;
  width: 100%
}

.vertical-align-middle {
  vertical-align: middle;
}

.site-wrapper {
  position: relative;
  top: 0;
  width: 100%;
  overflow: hidden
}

.block {
  position: relative
}

.block.hero {
  background-position: center center;
  background-repeat: no-repeat;
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 300;
  overflow: hidden
}

.block.hero .block__content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  user-select: none;
  cursor: default;
}

.loaded .block.hero {
  position: relative
}

.loaded .block.hero .preloader {
  bottom: -200px
}

.loaded .block.hero .main-nav {
  bottom: 0
}

.block {
  min-height: 100vh;
}

.block.hero {
  background: #212121;
  color: #fff;
  height: 100vh;
}

.block.hero .name {
  font-family: 'Expletus Sans', cursive;
  font-size: 8vw;
  font-weight: 100;
  margin: 0;
  line-height: 0.8em;
}

.block.hero .name span {
  font-weight: 600;
}

.block.hero .subtitle {
  font-family: 'Titillium Web', sans-serif;
  margin: 0;
  text-transform: uppercase;
  font-size: 2vw;
  font-weight: 100;
  margin-top: 26px;
}

.hamburger-icon {
  margin: 0;
  padding: 18px;
  height: 57px;
  width: 66px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: rgba(50, 50, 50, 0.5);
}

.hamburger-icon .burger {
  margin-bottom: 5px;
  background-color: #ffffee;
  height: 2px;
  width: 30px;
  border-radius: 3px;
}

.hamburger-icon .burger:last-child {
  margin-bottom: 0;
}

.change-1 {
  transform: rotate(90deg);
}

@media (max-width: 768px) {
  .block.hero .name {
    font-size: 12vw;
  }
  .block.hero .subtitle {
    font-size: 5.5vw;
    font-weight: 500;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body class="loading">
  <div class="site-wrapper">
    <div class="site-main fullpage">
      <section data-id="hero" class="block hero" style="margin-top:0;padding:0">
        <div class="hamburger-icon">
          <div class="burger one"></div>
          <div class="burger tikki"></div>
          <div class="burger two" style="margin-bottom: 0;"></div>
        </div>
        <canvas class="hero__canvas" id="canvas__particles" data-bg-color="#232323"></canvas>
        <div class="block__content vertical-align-helper text-align-center">
          <div class="vertical-align-middle">
            <h1 class="name">Chirag <span>Bhansali</span></h1>
            <h3 class="subtitle">Front-End Web Developer</h3>

          </div>
        </div>
      </section>

Answer 1

Try to make position: relative; to your hamburger and change z-index property

function Main() {}
Main.prototype = {
  initPreloading: function() {
    window.addEventListener("load", function() {
      document.body.classList = "loaded";
    });
    document.querySelector(".block.hero").addEventListener("click", this.particleRibbons());
  },
  particleRibbons: function() {
    var c = document.getElementById("canvas__particles"),
      x = c.getContext("2d"),
      w = window.innerWidth,
      h = window.innerHeight,
      f = 180,
      q = [{}, {}],
      m = Math,
      r = 0,
      u = m.PI * 2,
      v = m.cos,
      z = m.random;
    c.width = w;
    c.height = h;
    x.globalAlpha = 0.7;

    function i() {
      w = window.innerWidth;
      h = window.innerHeight;
      x.clearRect(0, 0, w, h);
      q = [{
        x: 0,
        y: h * 1 + f
      }, {
        x: 0,
        y: h * 1 - f
      }]
      while (q[1].x < w + f) d(q[0], q[1])
    }

    function d(i, j) {
      x.beginPath()
      x.moveTo(i.x, i.y)
      x.lineTo(j.x, j.y)
      var k = j.x + (z() * 2 - 0.25) * f,
        n = y(j.y)
      x.lineTo(k, n)
      x.closePath()
      r -= u / -100
      x.fillStyle = '#' + (v(r) * 127 + 128 << 16 | v(r + u / 3) * 127 + 128 << 8 | v(r + u / 3 * 2) * 127 + 128).toString(16)
      x.fill()
      q[0] = q[1]
      q[1] = {
        x: k,
        y: n
      }
    }

    function y(p) {
      var t = p + (z() * 2 - 1.1) * f
      return (t > h || t < 0) ? y(p) : t
    }
    i();
    return i;
  },
  initMisc: function() {
    window.addEventListener("resize", this.particleRibbons);
  },
  navIcon: function() {
    $(".hamburger-icon").on("click", function() {
      $(".one").toggleClass("change-1");
    });
  },
  init: function() {
    Main.initPreloading(), Main.particleRibbons(), Main.initMisc(), Main.navIcon();
  }
};
var Main = new Main;
Main.init();


// burger animation

//$(".hamburger-icon").on("click", function(){
//    $(".one").toggleClass("change-1");
//})

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: 'PT Sans', sans-serif;
  background-color: #212121;
}

body.loaded {
  overflow-x: hidden;
}

.text-align-center {
  text-align: center
}

.vertical-align-helper {
  height: 100vh;
}

.vertical-align-helper:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-left: -5px;
}

.vertical-align-helper>[class*=vertical-align-] {
  display: inline-block;
  width: 100%
}

.vertical-align-middle {
  vertical-align: middle;
}

.site-wrapper {
  position: relative;
  top: 0;
  width: 100%;
  overflow: hidden
}

.block {
  position: relative
}

.block.hero {
  background-position: center center;
  background-repeat: no-repeat;
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 300;
  overflow: hidden
}

.block.hero .block__content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  user-select: none;
  cursor: default;
}

.loaded .block.hero {
  position: relative
}

.loaded .block.hero .preloader {
  bottom: -200px
}

.loaded .block.hero .main-nav {
  bottom: 0
}

.block {
  min-height: 100vh;
}

.block.hero {
  background: #212121;
  color: #fff;
  height: 100vh;
}

.block.hero .name {
  font-family: 'Expletus Sans', cursive;
  font-size: 8vw;
  font-weight: 100;
  margin: 0;
  line-height: 0.8em;
}

.block.hero .name span {
  font-weight: 600;
}

.block.hero .subtitle {
  font-family: 'Titillium Web', sans-serif;
  margin: 0;
  text-transform: uppercase;
  font-size: 2vw;
  font-weight: 100;
  margin-top: 26px;
}

.hamburger-icon {
  margin: 0;
  padding: 18px;
  height: 57px;
  width: 66px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: rgba(50, 50, 50, 0.5);
  position: relative;
  z-index: 1;
}

.hamburger-icon .burger {
  margin-bottom: 5px;
  background-color: #ffffee;
  height: 2px;
  width: 30px;
  border-radius: 3px;
}

.hamburger-icon .burger:last-child {
  margin-bottom: 0;
}

.change-1 {
  transform: rotate(90deg);
}

@media (max-width: 768px) {
  .block.hero .name {
    font-size: 12vw;
  }
  .block.hero .subtitle {
    font-size: 5.5vw;
    font-weight: 500;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body class="loading">
  <div class="site-wrapper">
    <div class="site-main fullpage">
      <section data-id="hero" class="block hero" style="margin-top:0;padding:0">
        <div class="hamburger-icon">
          <div class="burger one"></div>
          <div class="burger tikki"></div>
          <div class="burger two" style="margin-bottom: 0;"></div>
        </div>
        <canvas class="hero__canvas" id="canvas__particles" data-bg-color="#232323"></canvas>
        <div class="block__content vertical-align-helper text-align-center">
          <div class="vertical-align-middle">
            <h1 class="name">Chirag <span>Bhansali</span></h1>
            <h3 class="subtitle">Front-End Web Developer</h3>

          </div>
        </div>
      </section>