From cd1faceaf13020da314ac86373070380dee15110 Mon Sep 17 00:00:00 2001
From: Dan Head <me@danielhead.com>
Date: Fri, 21 Dec 2018 20:55:26 +0000
Subject: [PATCH] Ensure layout is correct when nav__body is empty

---
 css/nav.css                   |  8 ++--
 theme/partials/navigation.php | 74 +++++++++++++++++++----------------
 2 files changed, 44 insertions(+), 38 deletions(-)

diff --git a/css/nav.css b/css/nav.css
index 3a9d71d..f1f5dca 100644
--- a/css/nav.css
+++ b/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
  */
diff --git a/theme/partials/navigation.php b/theme/partials/navigation.php
index f361169..0097b7e 100644
--- a/theme/partials/navigation.php
+++ b/theme/partials/navigation.php
@@ -7,41 +7,47 @@
     <span class="menu__text">Open menu</span>
   </button>
   <div class="nav__content">
-    <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">
-          <svg class="icon icon--extra-large">
-            <use xlink:href="#icon-windy"></use>
+    <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">
+            <svg class="icon icon--extra-large">
+              <use xlink:href="#icon-windy"></use>
+            </svg>
+          </span>
+          <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">
+            <use xlink:href="#icon-facebook"></use>
           </svg>
-        </span>
-        <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>
-    <?php wp_nav_menu(array(
-      menu => 'navigation',
-      container_class => 'nav__menu',
-      menu_class => 'nav__list',
-      walker => new Windycoys_Walker_Navigation()
-    )); ?>
-    <div class="nav__social">
-      <a class="nav__social-link" href="https://www.facebook.com/WindyCOYS/">
-        <svg class="icon icon--large">
-          <use xlink:href="#icon-facebook"></use>
-        </svg>
-      </a>
-      <a class="nav__social-link" href="https://twitter.com/windycoys/">
-        <svg class="icon icon--large">
-          <use xlink:href="#icon-twitter"></use>
-        </svg>
-      </a>
+        </a>
+        <a class="nav__social-link" href="https://twitter.com/windycoys/">
+          <svg class="icon icon--large">
+            <use xlink:href="#icon-twitter"></use>
+          </svg>
+        </a>
+      </div>
+      <div class="nav__search">
+        <?php get_search_form() ?>
+      </div>
+      <button class="nav__close">
+        <span class="nav__close-bar"></span>
+        <span class="nav__close-bar"></span>
+        <span class="nav__close-text">Close menu</span>
+      </button>
     </div>
-    <div class="nav__search">
-      <?php get_search_form() ?>
-    </div>
-    <button class="nav__close">
-      <span class="nav__close-bar"></span>
-      <span class="nav__close-bar"></span>
-      <span class="nav__close-text">Close menu</span>
-    </button>
   </div>
 </nav>