Ikona menu

sass/style.scss

@@ -30,13 +30,31 @@ header {
 	font-size: 1.35em;
 
 	img { width: 250px; }
+
 	h1 {
 		font-size: inherit;
 		color: #fff;
 	}
+
 	#menu {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		height: 100%;
 		width: 250px;
-		text-align: right;
+
+		#menuicon {
+			margin-left: 1em;
+			width: 1.5em;
+
+			div {
+				background: #fff;
+				height: .15em;
+				width: 100%;
+				margin: .5em 0;
+				border-radius: .25em;
+			}
+		}
 	}
 }
 

templates/index.html

@@ -12,7 +12,12 @@
 		<header>
 			<img src="/logo.png" alt="Logo">
 			<a href="{{ config.base_url }}"><h1>{{ config.title }}</h1></a>
-			<span id="menu" onclick="togglevisible('#nav')">Menu</span>
+			<div id="menu" onclick="togglevisible('#nav')">
+				Menu
+				<div id="menuicon">
+					<div></div><div></div><div></div>
+				</div>
+			</div>
 		</header>
 		<main>
 		{% block content %}