Restyle nav for mobile view

index.html

@@ -11,7 +11,9 @@
 			<header>
 				<div class="wrap">
 					<div class="border-container">
-						<img src="/static/logo.svg" alt="Logo" class="logo">
+						<div class="logo">
+							<img src="/static/logo.svg" alt="Logo" class="logo">
+						</div>
 						<nav>
 							<a href="#zasady">Obecné zásady</a>
 							<a href="#checklist">Učitelský checklist</a>
@@ -20,7 +22,7 @@
 							<a href="#faq">FAQ</a>
 						</nav>
 						<div class="menu-button">
-							.
+							<img src="/static/menu.svg" alt="menu">
 						</div>
 					</div>
 				</div>

sass/style.scss

@@ -71,9 +71,17 @@ section {
 	header {
 		border-bottom: 1px solid #5D6E81;
 		margin-bottom: 4em;
+		height: 5rem;
+
+		.wrap {
+			height: 100%;
+		}
+
 		.border-container {
+			width: 100%;
+			height: 100%;
 			display: flex;
-			align-items: center;
+			align-items: stretch;
 			justify-content: space-between;
 			gap: 2rem;
 			border-width: 0 1px;
@@ -83,15 +91,25 @@ section {
 		}
 
 		.logo {
-			height: 2rem;
+			display: flex;
+			align-items: center;
+			flex-shrink: 0;
+			height: 100%;
+
+			img {
+				height: 2rem;
+			}
 		}
 
 		nav {
-			display: flex;
+			display: none;
 
 			a {
-				display: block;
-				padding: 2em 1.5em;
+				display: flex;
+				align-items: center;
+				flex-shrink: 0;
+				padding: 0 1.5em;
+				overflow: hidden;
 				font-weight: bold;
 				text-decoration: none;
 				text-align: center;
@@ -105,7 +123,15 @@ section {
 		}
 
 		.menu-button {
-			display: none;
+			display: flex;
+			align-items: center;
+			flex-shrink: 0;
+			padding: 0 1.5em;
+			cursor: pointer;
+
+			img {
+				height: 2rem;
+			}
 		}
 	}
 

static/menu.svg

@@ -0,0 +1 @@
+<svg width="403.143" height="366.667" viewBox="0 0 12.094 11" xmlns="http://www.w3.org/2000/svg"><path d="M2.03 11a.5.5 0 0 1 0-1h8.035a.5.5 0 0 1 0 1zM.5 6a.5.5 0 0 1 0-1h11.094a.5.5 0 0 1 0 1zM2.03 1a.5.5 0 1 1 0-1h8.035a.5.5 0 0 1 0 1z" style="fill:#fff;fill-opacity:1"/></svg>