responsive menu adapted from _s to be mobile first. bare bones

nav.js

( function() {
	var container, button, menu;

	container = document.getElementById( 'site-navigation' );
	if ( ! container )
		return;

	button = container.getElementsByTagName( 'h1' )[0];
	if ( 'undefined' === typeof button )
		return;

	menu = container.getElementsByTagName( 'ul' )[0];

	// Hide menu toggle button if menu is empty and return early.
	if ( 'undefined' === typeof menu ) {
		button.style.display = 'none';
		return;
	}

	if ( -1 === menu.className.indexOf( 'nav-menu' ) )
		menu.className += ' nav-menu';

	button.onclick = function() {
		if ( -1 !== container.className.indexOf( 'toggled' ) )
			container.className = container.className.replace( ' toggled', '' );
		else
			container.className += ' toggled';
	};
} )();

nav.scss

/* primary navigation */
.menu-toggle,
.main-navigation.toggled .nav-menu {
	display: block;
}
.main-navigation ul {
	display: none;
}

/* small menu */
.menu-toggle {
	cursor: pointer;
}

/* small menu grows up */
@media screen and (min-width: 600px) {
	.menu-toggle {
		display: none;
	}

	.main-navigation {
		float: left;
		width: 100%;
		clear: both;

		ul {
			display: block;
		}

		li {
			float: left;
		}
	}
}

responsive-nav.html

<nav id="site-navigation" class="main-navigation" role="navigation">
	<h1 class="menu-toggle">Menu</h1>
	<div class="menu">
		<ul class="nav-menu">
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
		</ul>
	</div>
</nav>