Update header.

resources/assets/styles/layouts/_header.scss

@@ -1,10 +1,21 @@
 .banner {
+  background-position: bottom;
+  background-size: cover;
+
   .container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
     height: 560px;
+    width: 100%;
+    max-width: 100%;
     max-width: 1440px;
   }
 
   .toggle-menu {
+    display: block;
+    position: absolute;
     top: 30px;
     right: 17px;
     width: 25px;
@@ -13,6 +24,8 @@
     text-indent: -9999em;
 
     .icon {
+      display: block;
+      position: absolute;
       top: 7px;
       width: 25px;
       height: 3px;
@@ -51,6 +64,8 @@
   }
 
   .brand {
+    display: block;
+    align-self: flex-start;
     width: 6.5625rem;
     height: auto;
     margin: 30px 0 0 17px;
@@ -64,9 +79,17 @@
   }
 
   .primary-navigation {
+    display: flex;
+    position: absolute;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    top: 0;
+    width: 100%;
     height: 560px;
     margin: 0 0 0 -100%;
     padding: 0 17px;
+    background: transparent;
 
     a {
       display: none;
@@ -100,7 +123,12 @@
   }
 
   .branding {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
     height: 364px;
+    text-align: center;
 
     p {
       font-family: $font-family-sans-serif;
@@ -119,7 +147,12 @@
       margin: 0 auto;
     }
 
+    .toggle-menu {
+      display: none;
+    }
+
     .brand {
+      align-self: center;
       width: 16.5625rem;
       height: auto;
       margin-top: 40px;
@@ -130,6 +163,9 @@
       height: 40px;
       max-width: 1440px;
       margin: 0 auto;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
 
       a {
         display: inline-block;

resources/views/partials/header.blade.php

@@ -1,12 +1,12 @@
-<section class="banner bg-bottom cover" style="background-image: url(@if(is_front_page())
+<section class="banner" style="background-image: url(@if(is_front_page())
   @php(header_image())
 @else
   @asset('images/catalog-header.jpg')
 @endif);">
-  <div class="container flex flex-column justify-between items-center w-100 mw-100">
-    <a class="toggle-menu db dn-l absolute" href="#primary-navigation">{{ __('Toggle menu', 'aldine') }}<span class="icon db absolute"></span></a>
-    <a class="brand db self-start self-center-l" href="{{ home_url('/') }}"><span class="clip">{{ get_bloginfo('name', 'display') }}</span>{!! $site_logo !!}</a>
-    <nav id="primary-navigation" class="primary-navigation absolute flex flex-column justify-center items-start top-0 w-100 bg-transparent bg-animate flex-row-l justify-start-l items-center-l">
+  <div class="container">
+    <a class="toggle-menu" href="#primary-navigation">{{ __('Toggle menu', 'aldine') }}<span class="icon"></span></a>
+    <a class="brand" href="{{ home_url('/') }}"><span class="clip">{{ get_bloginfo('name', 'display') }}</span>{!! $site_logo !!}</a>
+    <nav id="primary-navigation" class="primary-navigation">
         <a href="{{ home_url('/catalog') }}">Catalog</a>
         <a href="#contact">Contact</a>
         @if(!is_user_logged_in())
@@ -19,7 +19,7 @@
           <a href="{{ wp_logout_url() }}">{{ __('Sign out', 'aldine') }}</a>
         @endif
     </nav>
-    <header class="branding flex flex-column justify-start items-center tc">
+    <header class="branding">
       <h1><a href="{{ home_url('/') }}">{{ get_bloginfo('name', 'display') }}</a></h1>
       <p>{{ get_bloginfo('description', 'display') }}</p>
     </header>