Hamburger Menu

_hamburger.scss

// Hamburger Menu Icon
$hamburger-position: right !default;

$hamburger-color: $header-font-color !default;
$hamburger-height: $header-height !default;
$hamburger-width: 24px !default;
$hamburger-thickness: 2px !default;

.hamburger {
	line-height: 0;
	font-size: 0;
	cursor: pointer;
	padding: 0 10px;
	box-sizing: content-box;

	// Which way should we display it?
	@if $hamburger-position == right {
		right: 0;
		float: right;
	} @else {
		left: 0;
		float: left;
	}

	// Block the span
	& > span { display: block }

	// Open & Close Nav shared styles
	&.open-nav,
	&.close-nav {
		width: $hamburger-width;

		// Shine bright like a diamon
		&:hover { opacity: 1 !important }

		// Hamburger patty
		& > .hamburger-patty {
			background-color: $hamburger-color;
			height: $hamburger-thickness !important;
			width: $hamburger-width;
			position: absolute;
			margin-top: ($hamburger-height * .75) / 2;

			@include media($tablet-up) {
				margin-top: $hamburger-height / 2;
			}

			// Top & Bottom Bun
			&:after,
			&:before {
				content: "";
				background-color: inherit;
				// Size & Position
				@include position(absolute, 0 0 null null);
				@include size(100%);
				// CSS3 Shit
				@include transform(translateZ(0));
				@include backface-visibility(hidden);
				@include transition(all .25s ease);
			}

			// Top Bun
			&:before { @include transform(translateY(-6px)) }
			// Bottom Bun
			&:after { @include transform(translateY(6px)) }
		}
	}
	// Open Nav styles
	&.open-nav {
		// Hover Event
		&:hover {
			// Hamburger Patty
			.hamburger-patty {
				// Top Bun
				&:before { @include transform(translateY(-8px)) }
				// Bottom Bun
				&:after { @include transform(translateY(8px)) }
			}
		}
	}
	// Close Nav styles
	&.close-nav {
		// Hamburger Patty
		.hamburger-patty {
			visibility: hidden;
			// Top & Bottom Buns
			&:before, &:after { visibility: visible }
			// Top Bun
			&:before { @include transform(rotate(45deg)) }
			// Bottom Bun
			&:after { @include transform(rotate(-45deg)) }
		}
	}
}

hamburger.html

<a href="" class="hamburger open-nav">
	<span class="hamburger-patty"></span>
</a>