WIP

dist/app.css

@@ -12062,6 +12062,29 @@ a {
   background-color: #063C5A;
 }
 
+.top-nav {
+  padding: 42px 0;
+}
+.top-nav .logo-wrapper {
+  width: 80%;
+  max-width: 358px;
+}
+.top-nav nav.main-nav {
+  height: 100%;
+}
+.top-nav nav.main-nav > div {
+  height: 100%;
+}
+.top-nav nav.main-nav ul#menu-main-menu {
+  display: flex;
+  gap: 3rem;
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+  height: 100%;
+  align-items: center;
+}
+
 .intro_block, .team-member-top, .team-members-top {
   background-size: cover;
   background-position: center center;

dist/mix-manifest.json

@@ -1,4 +1,4 @@
 {
     "/app.js": "/app.js?id=099e96d934e937b07341f2ca9fb82ec2",
-    "/app.css": "/app.css?id=d59c4c001599b01d5bc1650e380fdb0d"
+    "/app.css": "/app.css?id=6f6e65aed35ad9c12dc0392c5ef2fe8e"
 }

src/scss/app.scss

@@ -5,6 +5,9 @@
 
 @import "global";
 
+@import "header";
+@import "footer";
+
 @import "flex-intro-block";
 @import "flex-side-by-side";
 @import "flex-text-over-image-a";

src/scss/header.scss

@@ -0,0 +1,25 @@
+.top-nav {
+    padding: 42px 0;
+
+    .logo-wrapper {
+        width: 80%;
+        max-width: 358px;
+    }
+
+    nav.main-nav {
+        height: 100%;
+        & > div {
+            height: 100%;
+        }
+
+        ul#menu-main-menu {
+            display: flex;
+            gap: 3rem;
+            padding: 0;
+            margin: 0;
+            list-style-type: none;
+            height: 100%;
+            align-items: center;
+        }
+    }
+}

tpl/header.tpl

@@ -17,7 +17,7 @@
     <div class="container">
         <div class="row">
             <div class="col">
-                <div class="d-flex">
+                <div class="d-flex justify-content-between">
                     <div class="logo-wrapper">
                         <a href="/"><img src="{{ logo }}" alt="{{#wp-title}}" /></a>
                     </div>