changes

src/components/Menu.vue

@@ -29,6 +29,10 @@ export default {
           <div class="hamburger-line"></div>
           <div class="hamburger-line"></div>
         </div>
+        <div class="logo">
+          <img src="@images/tayrona-foods-yellow.png" alt="Tayrona Foods"/>
+        </div>
+        <div></div>
       </div>
       <div class="menu-content" :class="{collapsed: !mobileMenuOpened}">
         <div class="links">
@@ -44,7 +48,9 @@ export default {
       </div>
     </nav>
     <nav v-else>
-      <img class="logo" src="@images/tayrona-foods-yellow.png" />
+      <div class="logo">
+        <img src="@images/tayrona-foods-yellow.png" alt="Tayrona Foods"/>
+      </div>
       <div class="links">
         <router-link class="link" to="/">{{ $t('menu.home')}}</router-link>
         <router-link class="link" to="/about">{{ $t('menu.about') }}</router-link>
@@ -80,9 +86,9 @@ export default {
       height: 100%;
       transition: background-color .3s ease-in-out;
 
-      .logo {
-        height: 75px;
-        width: 75px;;
+      .logo img{
+        height: 100px;
+        width: 100px;;
       }
 
       .links {
@@ -148,6 +154,20 @@ export default {
     .menu {
       &-bar {
         width: 100%;
+        display: grid;
+        grid-template-columns: 1fr 2fr 1fr;
+        height: 115px;
+        transition: height .2s ease-out;
+
+        .logo, .hamburger {
+          justify-self: center;
+          align-self: center;
+        }
+
+        .logo {
+          opacity: 1;
+          transition: opacity .2s ease-out;
+        }
       }
       &-content {
         color: white;
@@ -172,8 +192,17 @@ export default {
         }
       }  
 
-      &.has-sticky-0 nav, &.has-sticky-1 nav{
-        background-color: #000;
+      &.has-sticky-0, &.has-sticky-1 {
+        .menu-bar {
+          height: 50px;
+        }
+        .logo {
+          opacity: 0;
+          overflow: hidden;
+        }
+        nav {
+          background-color: #000;
+        }
       }
     }
   }