sothr-dot-com/themes/pure/layouts/partials/header.html

<div class="menu-wrapper">
	<div class="pure-menu menu menu-top">
		<a href="{{ .Site.BaseURL }}" class="pure-menu-heading menu-brand" title="Home">{{ .Site.Title }}</a>
		<a href="#" class="menu-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
	</div>
	<div class="pure-menu pure-menu-horizontal pure-menu-scrollable menu menu-bottom menu-tucked" id="tuckedMenu">
		<div class="menu-screen">
			<ul class="pure-menu-list">
				{{ range where (sort .Site.Pages "Weight" "desc") "Type" "navLink"}}
				<li class="pure-menu-item"><a href="{{ .URL }}" class="pure-menu-link" title="{{ .Title }}">{{ .Title }}</a></li>
				{{ end }}
				{{ range sort .Site.Params.links "weight" "desc" }}
				<li class="pure-menu-item">
				{{ if .image }}
					<a href="{{ .url }}" target="_blank" title="{{ .title }}">
						<img src="{{ .image | absURL }}" />
					</a>
				{{ else }}
					<a href="{{ .url }}" target="_blank" class="pure-menu-link" title="{{ .title }}">
					{{ .title }}
					</a>
				{{ end }}
				</li>
				{{ end }}
			</ul>
		</div>
	</div>
</div>
<script>
(function (window, document) {
	document.getElementById('toggle').addEventListener('click', function (e) {
		document.getElementById('tuckedMenu').classList.toggle('menu-tucked');
		document.getElementById('tuckedMenu').classList.toggle('menu-untucked');
		document.getElementById('toggle').classList.toggle('x');
	});
})(this, this.document);
</script>