JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<div id="header">
    <a href="/" id="logo">Milton Bayer</a>
  	<div id="nav-icon">
  		<span></span>
  		<span></span>
  		<span></span>
  		<span></span>
  	</div>
</div> <!-- /header -->


<div class="overlay overlay-scale">
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Work</a></li>
			<li><a href="#">Clients</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>
</div> <!-- /overlay -->

CSS

div#header {
    position: absolute;
    top: 50px;
    left: 50px;
	/* Width needs fixing - breaks at smaller sizes*/
    width: 97%;
}

a#logo {
    background: url('http://dev.miltonbayer.com/sites/all/themes/miltonbayer/images/logo.png');
    width: 148px;
    height: 64px;
    display: inline-block;
    position: absolute;
    left: 0;
    text-indent: -9999px;
	z-index:200;
}

#nav-icon {
  width: 24px;
  height: 25px;
  position: absolute;
  right: 60px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s cubic-bezier(.77,0,.24,1);
  -moz-transition: .5s cubic-bezier(.77,-0.7,.24,1.3);
  -o-transition: .5s cubic-bezier(.77,-0.7,.24,1.3);
  transition: .5s cubic-bezier(.77,-0.7,.24,1.3);
  cursor: pointer;
  z-index:301;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: #000;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s cubic-bezier(.77,0,.24,1);
  -moz-transition: .5s cubic-bezier(.77,-0.7,.24,1.3);
  -o-transition: .5s cubic-bezier(.77,-0.7,.24,1.3);
  transition: .5s cubic-bezier(.77,-0.7,.24,1.3);
}

#nav-icon span:nth-child(1) {
  top: 0px;
}

#nav-icon span:nth-child(2),
#nav-icon span:nth-child(3) {
  top: 10px;
}

#nav-icon span:nth-child(4) {
  top: 20px;
}

#nav-icon.cross span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon.cross span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon.cross span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon.cross span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

/* Navigation */

/* Overlay...

JavaScript

jQuery(document).ready(function(){
	
	jQuery('#nav-icon').click(function(){
		jQuery(this).toggleClass('cross');
		jQuery('.overlay').toggleClass('open');
	});
	
	
});