corneal64
diff --git a/‎24 - Sticky Nav/index-FINISHED.html
-67 b/‎24 - Sticky Nav/index-FINISHED.html
-67
diff --git a/‎24 - Sticky Nav/index-START.html ‎24 - Sticky Nav/index.html
+15-1 b/‎24 - Sticky Nav/index-START.html ‎24 - Sticky Nav/index.html
+15-1
diff --git a/‎24 - Sticky Nav/style-FINISHED.css
-101 b/‎24 - Sticky Nav/style-FINISHED.css
-101
diff --git a/‎24 - Sticky Nav/style-START.css
-88 b/‎24 - Sticky Nav/style-START.css
-88
diff --git a/‎24 - Sticky Nav/style.css
+103 b/‎24 - Sticky Nav/style.css
+103
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Sticky Nav</title>
-  <link rel="stylesheet" href="style-START.css">
+  <link rel="stylesheet" href="style.css">
 </head>
 <body>
 
@@ -54,6 +54,20 @@ <h1>A story about getting lost.</h1>
   </div>
 
 <script>
+  const nav = document.querySelector("#main");
+  const navTop = nav.offsetTop;
+
+  function fixNav() {
+    if (window.scrollY >= navTop ) {
+      document.body.style.paddingTop = nav.offsetHeight + "px";
+      document.body.classList.add("fixed-nav")
+    } else {
+      document.body.style.paddingTop = 0;
+      document.body.classList.remove("fixed-nav")
+    }
+  }
+
+  window.addEventListener("scroll", fixNav)
 
 </script>
 
 
@@ -0,0 +1,103 @@
+html {
+	box-sizing: border-box;
+	background: #eeeeee;
+	font-family: 'helvetica neue';
+	font-size: 20px;
+	font-weight: 200;
+}
+
+body {
+	margin: 0;
+}
+
+*,
+*:before,
+*:after {
+	box-sizing: inherit;
+}
+
+.site-wrap {
+	max-width: 700px;
+	margin: 70px auto;
+	background: white;
+	padding: 40px;
+	text-align: justify;
+	box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
+	transform: scale(0.98);
+	transition: transform 0.5s;
+}
+
+.fixed-nav .site-wrap {
+	transform: scale(1);
+}
+
+header {
+	text-align: center;
+	height: 50vh;
+	background: url(http://wes.io/iEgP/wow-so-deep.jpg) bottom center no-repeat;
+	background-size: cover;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+h1 {
+	color: white;
+	font-size: 7vw;
+	text-shadow: 3px 4px 0 rgba(0, 0, 0, 0.2);
+}
+
+nav {
+	background: black;
+	top: 0;
+	width: 100%;
+	transition: all 0.5s;
+	position: relative;
+	z-index: 1;
+}
+
+.fixed-nav nav {
+	position: fixed;
+	box-shadow: 0, 5px rgb(0, 0, 0, 0.1);
+}
+
+nav ul {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	display: flex;
+}
+
+nav li {
+	flex: 1;
+	text-align: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+li.logo {
+	max-width: 0;
+	overflow: hidden;
+	background: white;
+	transition: all .5s;
+	font-weight: 600;
+	font-size: 30px;
+}
+
+.fixed-nav li.logo {
+	max-width: 500px;
+}
+
+li.logo a {
+	color: black;
+}
+
+nav a {
+	text-decoration: none;
+	padding: 20px;
+	display: inline-block;
+	color: white;
+	transition: all 0.2s;
+	text-transform: uppercase;
+}