Cacher is the code snippet organizer for pro developers

<header id="header">
	<div>
		<div>
			<a href="/" id="logo">
				<img src="logo.svg">
			</a>
			<h1>Page Title</h1>
		</div>
		<div>
			<a id="show-dropdown" href="#header-dropdown">MENU</a>
		</div>
	</div>
</div>
<div id="header-dropdown">
	<div>
		<nav id="main-mav">
			<ul>
				<li>
					<a href="/home">Home</a>
				</li>
			</ul>
		</nav>
	</div>
	<div>
		<div id="main-nav-infopanel">
			Pictures and shit
		</div>
	</div>
</div>


#header {
	&:before, &:after {
		display: table;
		content: '';
		clear: both;
	}
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%:
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 1em;
	> div {
		&:first-child:not(:last-child) {
			float: left;
			width: 50%;
			& + div {
				float: right;
			}
		}
	}
}

#show-dropdown {
	display: block;
}


#header-dropdown {
	postion: fixed;
	top: 0;
	left: 0;
	right: 0;
	transform: translateY(-100%);
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 1em;
	&:focus, &:target, &.focus {
		trransform: translateY(0);
	}
}


$('#header-dropdown').click(function(e){
	e.preventDefault();
	$('#header-dropdown').addClass('focus');
})