Hamburger Icon

index.html

<style>
    /* Hamburger icon */
	.c-hamburger {
		position: relative;
		overflow: hidden;
		margin: 0;
		padding: 0;
		width: 34px;
		height: 34px;
		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;
	}
	.c-hamburger:hover,
	.c-hamburger:focus {
		background: transparent;
	}
	.c-hamburger:focus {
		outline: none;
	}
	/* For spans */
	.c-hamburger span {
		display: block;
		position: absolute;
		top: 15px;
		left: 0;
		right: 0;
		height: 4px;
		background: #40608f;
	}
	.c-hamburger span::before,
	.c-hamburger span::after {
		position: absolute;
		display: block;
		left: 0;
		width: 100%;
		height: 4px;
		background-color: #40608f;
		content: "";
	}
	.c-hamburger span::before {
		top: -10px;
	}
	.c-hamburger span::after {
		bottom: -10px;
	}
	/* cross form */
	.c-hamburger--htx {
		background-color: transparent;
	}
	.c-hamburger--htx span {
		-moz-transition: background 0s 0.3s;
		-webkit-transition: background 0s 0.3s;
		transition: background 0s 0.3s;
	}
	.c-hamburger--htx span::before,
	.c-hamburger--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;
	}
	.c-hamburger--htx span::before {
		-moz-transition-property: top, transform;
		-webkit-transition-property: top, transform;
		transition-property: top, transform;
	}
	.c-hamburger--htx span::after {
		-moz-transition-property: bottom, transform;
		-webkit-transition-property: bottom, transform;
		transition-property: bottom, transform;
	}
	/* active state, i.e. menu open */
	.c-hamburger--htx.is-active {
		background-color: transparent;
	}
	.c-hamburger--htx.is-active span {
		background: none;
	}
	.c-hamburger--htx.is-active span::before {
		top: 0;
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.c-hamburger--htx.is-active span::after {
		bottom: 0;
		-moz-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.c-hamburger--htx.is-active span::before,
	.c-hamburger--htx.is-active span::after {
		-moz-transition-delay: 0s, 0.3s;
		-webkit-transition-delay: 0s, 0.3s;
		transition-delay: 0s, 0.3s;
	}  	 
</style>
<button class="c-hamburger c-hamburger--htx menu-trigger navbar-toggle collapsed" data-toggle="collapse" data-target="#primary-navbar-collapse" aria-expanded="false">
  <span>toggle menu</span>
</button>
<script>
	<!-- ============================================== -->
	<!-- ============ CROSS ICON ============ -->
	<!-- ============================================== -->		
			
	(function() {
	
	  "use strict";
	
	  var toggles = document.querySelectorAll(".c-hamburger");
	
	  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");
		});
	  }
	
	})();	
</script>