Hamburger icon

header.php

<button class="hamburger-menu hamburger-menu--htx visible-sm">
  <span><?php esc_html_e( 'Toggle menu', 'tzmotorsport' ); ?></span>
</button>	

main.js

	/********************************
	 		* Hamburger Menu *
	********************************/
	var toggles = document.querySelectorAll(".hamburger-menu");

	for (var i = toggles.length - 1; i >= 0; i--) {
		var toggle = toggles[i];
		toggleHandler(toggle);
	};

	function toggleHandler(toggle) {
		toggle.addEventListener( "click", function(e) {
		  e.preventDefault();
		  (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
		  $("#site-nav-wrap").stop(true, true).slideToggle();
		  $("body").toggleClass("menu-open");
		});
	}

style.css

    /* Hamburger icon */
	.hamburger-menu {
		position: absolute;
		top: 12px;
		right: 49px;
		z-index: 2;
		overflow: hidden;
		margin: 0;
		padding: 0;
		width: 23px;
		height: 16px;
		font-size: 0;
		text-indent: -9999px;
		appearance: none;
		box-shadow: none;
		border-radius: none;
		border: none;
		cursor: pointer;
		-moz-transition: background 0.3s;
		-webkit-transition: background 0.3s;
		transition: background 0.3s;
		display: block;
	}
	.hamburger-menu:hover,
	.hamburger-menu:focus {
		background: transparent;
	}
	.hamburger-menu:focus {
		outline: none;
	}
	/* For spans */
	.hamburger-menu span {
		display: block;
		position: absolute;
		top: 6px;
		left: 0;
		right: 0;
		height: 4px;
		background: #fff;
		-webkit-border-radius: 2px;
		        border-radius: 2px;
	}
	.hamburger-menu span::before,
	.hamburger-menu span::after {
		position: absolute;
		display: block;
		left: 0;
		width: 100%;
		height: 4px;
		background-color: #fff;
		content: "";
		-webkit-border-radius: 2px;
		        border-radius: 2px;		
	}
	.hamburger-menu span::before {
		top: -6px;
	}
	.hamburger-menu span::after {
		bottom: -6px;
	}
	/* cross form */
	.hamburger-menu--htx {
		background-color: transparent;
	}
	.hamburger-menu--htx span {
		-moz-transition: background 0s 0.3s;
		-webkit-transition: background 0s 0.3s;
		transition: background 0s 0.3s;
	}
	.hamburger-menu--htx span::before,
	.hamburger-menu--htx span::after {
		-moz-transition-duration: 0.3s, 0.3s;
		-webkit-transition-duration: 0.3s, 0.3s;
		transition-duration: 0.3s, 0.3s;
		-moz-transition-delay: 0.3s, 0s;
		-webkit-transition-delay: 0.3s, 0s;
		transition-delay: 0.3s, 0s;
	}
	.hamburger-menu--htx span::before {
		-moz-transition-property: top, transform;
		-webkit-transition-property: top, transform;
		transition-property: top, transform;
	}
	.hamburger-menu--htx span::after {
		-moz-transition-property: bottom, transform;
		-webkit-transition-property: bottom, transform;
		transition-property: bottom, transform;
	}
	/* active state, i.e. menu open */
	.hamburger-menu--htx.is-active {
		background-color: transparent;
	}
	.hamburger-menu--htx.is-active span {
		background: none;
	}
	.hamburger-menu--htx.is-active span::before {
		top: 0;
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		background-color: #766c6b;
	}
	.hamburger-menu--htx.is-active span::after {
		bottom: 0;
		-moz-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		background-color: #766c6b;
	}
	.hamburger-menu--htx.is-active span::before,
	.hamburger-menu--htx.is-active span::after {
		-moz-transition-delay: 0s, 0.3s;
		-webkit-transition-delay: 0s, 0.3s;
		transition-delay: 0s, 0.3s;
	}