diff --git a/public/index.html b/public/index.html
index aed7d54..1ee71fd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -28,7 +28,7 @@
         <li><a href="#screens-nav">SCREENS</a></li>
         <li><a href="#blog-nav">BLOG</a></li>
         <li><a href="#support-nav">SUPPORT</a></li>
-        <li><a href="#"><span class="icon-search">search place holder</span></a></li>
+        <li><a href="#"><span class="icon-search"></span></a></li>
       </ul>
     </nav>
 		<section id="home-nav">
diff --git a/public/sass/partials/_header.scss b/public/sass/partials/_header.scss
index e69de29..40de491 100644
--- a/public/sass/partials/_header.scss
+++ b/public/sass/partials/_header.scss
@@ -0,0 +1,72 @@
+// --- MOBILE NAV BAR --- //
+nav {
+	font-family: $header-font;
+	background: $color-background-header;
+	color: $color-text-light;
+	position: fixed;
+	width: 100%;
+	top: 0;
+	height: 3em;
+	z-index: 1;
+	.appbox-logo {
+		margin: 0 auto;
+		display: block;
+		width: 5em;
+		float: left;
+		padding-top: 1.5em;
+	}
+	.show-menu {
+		display: block;
+		text-decoration: none;
+		background: $color-background-header;
+		color: $color-text-light;
+		text-align: center;
+		padding: 0.5em 0; 
+	}
+	input[type=checkbox]{
+		display: none;
+	}
+	input[type=checkbox]:checked ~
+	.menu {
+		display: block;
+		a {
+			display: block;
+			text-align: center;
+			text-decoration: none;
+			color: $color-text-light;
+			background: $color-background-header;
+			padding: 0.5em;
+			&:hover {
+				color: $color-link-button-h;
+			}
+		}
+		li {
+			width: 100%;
+		}
+	}
+	@media (min-width: 50em) {
+		height: 5em;
+		padding-left: 5em;
+		padding-right: 5em;
+		.appbox-log {
+			float: left;
+			margin-top: 2em;
+		}
+		.show-menu {
+			display: none;
+		}
+		.menu {
+			display: inline;
+			float: right;
+			text-align: right;
+			a &:hover + .hidden, .hidden:hover {
+				display: block;
+			}
+			li {
+				display: inline-block;
+				padding-top: 1.5em;
+				padding-right: 1em;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/public/sass/partials/_nav.scss b/public/sass/partials/_nav.scss
index a493856..cd4151f 100644
--- a/public/sass/partials/_nav.scss
+++ b/public/sass/partials/_nav.scss
@@ -1,77 +1,3 @@
-// --- MOBILE NAV BAR --- //
-.menu {
-	display: none;
-	@media screen and (min-width: 50em) {
-		display: inline;
-		float: right;
-		text-align: right;
-	}
-	a {
-		display: block;
-		text-align: center;
-		text-decoration: none;
-		color: $color-3;
-		background: $color-1;
-		padding: 0.2em;
-		&:hover {
-			color: $color-2;
-			@media screen and (min-width: 50em) {
-				&:hover + .hidden, .hidden:hover {
-					display: block;
-				}
-			}
-		}
-	}
-	li {
-		width: 100%;
-		@media screen and (min-width: 50em) {
-			display: inline-block;
-			width: 11%;
-		}
-	}
+@mixin widthDisplay() {
+	
 }
-
-nav {
-	font-family: arial;
-	background: $color-1;
-	color: $color-3;
-	position: fixed;
-	width: 100%;
-	top: 0;
-	height: 3em;
-	z-index: 1;
-	@media screen and (min-width: 50em) {
-		height: 5em;
-		padding-left: 5em;
-		padding-right: 5em;
-	}
-	.show-menu {
-		display: block;
-		text-decoration: none;
-		background: $color-1;
-		color: $color-3;
-		text-align: center;
-		padding: 0.5em 0;
-		@media screen and (min-width: 50em) {
-			display: none;
-		}
-	}
-	input[type=checkbox]{
-		display: none;
-	}
-	input[type=checkbox]:checked ~ .menu{
-		display: block;
-	}
-	.appbox-logo {
-		margin: 0 auto;
-		display: block;
-		width: 5em;
-		@media screen and (min-width: 50em) {
-			float: left;
-			margin-top: 2em;
-		}
-	}
-}
-body {
-	margin-top: 4em;
-}
\ No newline at end of file