redesign header

_includes/header.html

@@ -3,18 +3,18 @@
             <button id="menu-toggle">
                 <i></i>
             </button>
-            <a href="index">
-                <div id="logo">
-                </div>
-            </a>
         </div>
         <nav id="menu">
-            <a class="menu-item" href="index">
+            <a class="menu-item" href="/">
                 <button class="menu-item fluid">Home</button>
             </a>
             <a class="menu-item" href="about">
                 <button class="menu-item fluid">About</button>
             </a>
+            <a id="logo-wrapper" href="/">
+                <div id="logo">
+                </div>
+            </a>
             <a class="menu-item" href="resources">
                 <button class="menu-item fluid">Resources</button>
             </a>

css/header.css

@@ -6,30 +6,26 @@ header {
 
 #banner {
     width: 100%;
-    height: 10vh;
+    display: flex;
-    text-align: center;
+    justify-content: center;
-    display: table;
     background-color: #fff;
     position: relative;
     z-index: 3;
-}
-
-#banner #logo {
-    content: '';
-    height: 10vh;
-    width: 100%;
-    display: inline-block;
     vertical-align: middle;
     font-size: 2.5em;
     font-weight: bold;
     overflow: hidden;
+}
+
+#logo {
+    width: 15vh;
+    height: 12vh;
     background-image: url('../img/logo.png');
-    background-size: 8vh;
+    background-size: 100%;
     background-position: center;
     background-repeat: no-repeat;
 }
 
-
 #menu-toggle {
     cursor: pointer;
     background-color: #fff;
@@ -57,17 +53,17 @@ header {
 
 nav#menu {
     width: 100%;
-    height: 50px;
     display: inline-flex;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: center;
     border-bottom: 3px solid rgb(164, 38, 44);
+    
     /*box-shadow: 0 28px 79px 0 rgba(66, 129, 121, .27);*/
 }
 
 a.menu-item {
-    width: 15vw;
+    width: 12vw;
     color: #000;
     font-size: 1em;
     z-index: 10;
@@ -79,7 +75,7 @@ button.menu-item {
     cursor: pointer;
     font-size: 1.5em;
     width: 100%;
-    height: 50px;
+    height: 100%;
     outline: none;
     color: #000;
     background-color: transparent;

css/responsive.css

@@ -45,6 +45,9 @@
     button.menu-item:active {
         font-size: 1.1em;
     }
+    #logo-wrapper {
+        display: none;
+    }
     nav#menu {
         width: 30vw;
         max-width: 200px;