Fixed header template

When scrolling the page, your header wil be fixed at the top and always visible.

You can combine this with other .layout-- modifiers. So <html class="layout--drawer layout--fixed-header"> is valid and will work.

Selector Description
.layout--fixed-header Required On the html tag</code>
<!DOCTYPE html>
<html lang="en" class="no-js layout--fixed-header">
<head>...</head>
<body>
	<header class="site-header">...</header>
	<main class="main-container">
		<div class="main-content">
			<div class="container">
				...
			</div>
		</div>
	</main>
</body>
</html>

Here’s some text filler to demo the fixed header.

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.