Vertical header template

When scrolling the page, your header wil be fixed at the left and always visible. On mobile this will transform to a horizontal header with a hamburger menu.

Selector		Description
`.layout--vertical-header`	Required	On the `html` tag
`.site-header--vertical`	Required	Modifier on `.site-header`
`.nav--vertical`	Optional	Only if you need navigation in the vertical header
`.hamburger`	Optional	Only if you need navigation in the vertical header. This is for the mobile view only.

<!DOCTYPE html>
<html lang="en" class="no-js layout--vertical-header">
<head>...</head>
<body>
	<header class="site-header site-header--vertical">
		<div class="site-header__section">
			<!-- app icon here -->
		</div>
		<input type="checkbox" class="hamburger__checkbox" id="nav-toggle">
		<label for="nav-toggle" class="hamburger" role="button" aria-label="Toggle the menu">
			<span class="hamburger__line" role="presentation"></span>
			<span class="hamburger__line" role="presentation"></span>
			<span class="hamburger__line" role="presentation"></span>
		</label>
		<nav class="nav nav--vertical">...</nav>
	</header>
	<main class="main-container">
		<div class="main-content">
			<div class="container">
				...
			</div>
		</div>
	</main>
</body>
</html>

Here’s some text filler.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima mollitia reprehenderit voluptatum nostrum ipsam et id, aliquid quasi, similique quaerat animi. Magnam, fugit. Facere repellat corrupti, ipsam. Ullam nihil aliquam molestiae sunt placeat cumque culpa explicabo exercitationem perferendis, nisi illo vel quibusdam, eaque doloremque soluta perspiciatis ad at sequi non eveniet fuga aperiam. Reiciendis, error. Totam, ut necessitatibus rerum voluptatibus. Eaque hic exercitationem vitae. Libero maiores doloribus quidem culpa sapiente, praesentium vero perferendis impedit sed. Aspernatur perferendis et repellat temporibus modi.

Itaque, soluta? Quod eligendi laudantium a, in vero libero aliquam nihil dolorem, dolorum debitis magnam, fugiat doloremque accusamus animi aut excepturi sapiente iste alias. Hic optio mollitia nam quidem nobis modi nisi qui officiis, perferendis ab. Cum, provident porro repellendus ipsam, consectetur a quae atque voluptate obcaecati neque asperiores assumenda earum adipisci rem ea et accusantium impedit hic itaque, dolores fugit aliquam! Aperiam sequi id corporis, a vel doloremque saepe quibusdam possimus quas nostrum quia repellat vero reiciendis, eos perferendis distinctio nam.

Repellendus aperiam, dicta minima fugit ullam similique. Voluptates dolorem fugiat ipsa perferendis velit ab, fugit quod praesentium illum nisi, laudantium consequuntur! Praesentium excepturi atque, alias nulla quod perspiciatis itaque omnis voluptate. Sapiente facilis adipisci optio et excepturi.