New navbar

mobile still wip

www/css/style.css

@@ -15,8 +15,6 @@ nav {
 	height: 50px;
 	background-color: #002244;
 	overflow: hidden;
-
-	box-shadow: 0 0 5px #000;
 }
 
 nav * {
@@ -37,33 +35,37 @@ nav h2 {
 	color: #002244;
 }
 
-nav img{
-	width: 50px;
-	height: 50px;
+nav .logo{
+	position: fixed;
+	top: 6px;
+	left: 6px;
+	width: 38px;
+	height: 38px;
 }
 
 nav ul {
-	display: table;
-	table-layout: fixed;
 	position: fixed;
 	top: 0;
-	left: 15vw;
-	right: 15vw;
-	width: 70vw;
-	height: 50px;
+	left: 50px;
+	width: 100vw;
+	height: 45px;
 
 	list-style: none;
 }
 
+nav li {
+	height: 45px;
+	line-height: 55px;
+}
+
 nav a {
-	display: table-cell;
+	display: inline-block;
 	height: 100%;
-	margin: 0;
+	margin: 0 .7em;
 
 	text-decoration: none;
 	font-size: 1.2em;
 	text-align: center;
-	line-height: 48px;
 
 	border-bottom: 2px solid rgba(255, 255, 255, 0);
 
@@ -86,8 +88,12 @@ nav .login {
 	position: fixed;
 	top: 0;
 	right: 0;
-	height: 48px;
-	padding: 0 1em;
+	height: 45px;
+	line-height: 55px;
+}
+
+#navopen {
+	display: none;
 }
 
 main {
@@ -116,4 +122,81 @@ main h2 {
 	background-color: #00407F;
 
 	transition: background-color .2s ease;
+}
+
+@media(max-width: 800px){
+	nav .logo {
+		visibility: hidden;
+	}
+
+	nav .login {
+		display: none;
+	}
+
+	nav ul {
+		left: 0px;
+		height: 50px;
+	}
+
+	nav a {
+		display: none;
+		border-bottom: none;
+		text-align: left;
+		margin: 0;
+	}
+
+	nav a:hover {
+		border-bottom: none;
+	}
+
+	nav a.active {
+		display: block;
+		height: 50px;
+		line-height: 50px;
+		padding: 0 .5em;
+		border-bottom: none;
+	}
+
+	#navopen {
+		display: block;
+		position: fixed;
+		top: 0;
+		right: 0;
+		line-height: 50px;
+		text-align: center;
+		width: 50px;
+		height: 50px;
+		margin: 0;
+		padding: 0;
+		background-color: #002244;
+	}
+
+	.opennav a {
+		display: block;
+		text-align: left;
+		margin: 0;
+		padding: 0 .5em;
+	}
+
+	.opennav a:hover {
+		background-color: #00407F;
+	}
+
+	.opennav a:hover li {
+		background-color: #00407F;
+	}
+
+	.opennav a.active:hover {
+		background-color: #002244;
+	}
+
+	.opennav a.active:hover li {
+		background-color: #002244;
+	}
+
+	.opennav .login {
+		position: relative;
+		display: block;
+		border-top: 1px solid gray;
+	}
 }