Ensure layout is correct when nav__body is empty

css/nav.css

@@ -44,6 +44,10 @@
   top: 32px;
 }
 
+.nav__body {
+  flex-grow: 1;
+}
+
 .nav__title {
   font-family: var(--heading-font-family);
   font-size: 2.5rem;
@@ -118,10 +122,6 @@
   top: -10000px;
 }
 
-.nav__menu {
-  flex-grow: 1;
-}
-
 /**
  * nav List
  */

theme/partials/navigation.php

@@ -7,6 +7,7 @@
     <span class="menu__text">Open menu</span>
   </button>
   <div class="nav__content">
+    <div class="nav__head">
       <h2 class="nav__title">
         <a class="nav__title-link" href="<?php get_site_url() ?>/" aria-label="Back Home" tabindex="-1">
           <span class="nav__title-link-icon">
@@ -17,12 +18,16 @@
           <img src="<?php echo get_template_directory_uri(); ?>/images/icon.png" alt="WindyCOYS logo" class="nav__title-link-image" data-load-transition="false">
         </a>
       </h2>
+    </div>
+    <div class="nav__body">
       <?php wp_nav_menu(array(
         menu => 'navigation',
         container_class => 'nav__menu',
         menu_class => 'nav__list',
         walker => new Windycoys_Walker_Navigation()
       )); ?>
+    </div>
+    <div class="nav__foot">
       <div class="nav__social">
         <a class="nav__social-link" href="https://www.facebook.com/WindyCOYS/">
           <svg class="icon icon--large">
@@ -44,4 +49,5 @@
         <span class="nav__close-text">Close menu</span>
       </button>
     </div>
+  </div>
 </nav>