...

resources/css/main.scss

@@ -38,6 +38,10 @@ html, body {
   display: flex;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
 #header {
   // Layout, details and children is set in partials/header.scss
   height: 10vh;
@@ -59,7 +63,6 @@ html, body {
   align-items: center;
 
   .dropdown-nav-item {
-    display: inline-block;
     position: relative;
     margin-top: math.div(variables.$px_horizontalPadding, 4);
     background: -webkit-linear-gradient(#FFFFFF, #adf0ff);
@@ -67,6 +70,8 @@ html, body {
     -webkit-text-fill-color: transparent;
     font: 600 28px "Montserrat", sans-serif;
     text-decoration: none;
+    -webkit-animation: navbar-appear 550ms;
+    animation: navbar-appear 550ms;
 
     &:first-of-type {
       margin-top: math.div(variables.$px_horizontalPadding, 2);
@@ -97,6 +102,11 @@ html, body {
   animation: drawer-close 550ms;
 }
 
+.dropdown-nav-item_close_animation {
+  -webkit-animation: navbar-disappear 550ms;
+  animation: navbar-disappear 550ms;
+}
+
 @-webkit-keyframes drawer-close {
   from {
     -webkit-transform: translate3d(0, 0, 0);
@@ -147,6 +157,56 @@ html, body {
   }
 }
 
+@-webkit-keyframes navbar-appear {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes navbar-appear {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@-webkit-keyframes navbar-disappear {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+@keyframes navbar-disappear {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
 #container {
   height: 90vh;
   display: grid;