From 3a0beff483d0f3a64d57b1aad46ced15aa316249 Mon Sep 17 00:00:00 2001
From: Oyelakin Mercy <oyelakinmercy68@gmail.com>
Date: Oct 19 2020 23:27:46 +0000
Subject: If the text of an item in the nav menu is long enough to wrap, the arrow gets pushed above the line. This is caused by the use of flex for the navigation item. Instead of using flex, the toggle arrow should be placed using absolute positioning so as not to affect the layout of the text.

This commit made the following changes;
- Absolute positioning used for toggle to avoid unintended wrapping behavior
- Size of toggle button reduced
- Line height was tightened
- Adjust spacingBranch 'fix-nav-menu-layout' set up to track remote branch 'fix-nav-menu-layout' from 'origin'.
Everything up-to-date

Signed-off-by: Oyelakin Mercy <oyelakinmercy68@gmail.com>

---

diff --git a/src/css/navigation-menu.css b/src/css/navigation-menu.css
index f1bc579..99ed628 100644
--- a/src/css/navigation-menu.css
+++ b/src/css/navigation-menu.css
@@ -31,6 +31,10 @@ html.is-clipped--nav {
 .nav-menu {
   flex-grow: 1;
   min-height: 0;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  line-height: 1.35;
+
 }
 
 nav.nav-menu span.nav-text strong {
@@ -46,13 +50,7 @@ nav.nav-menu span.nav-text strong {
   font-weight: 500;
   color: #424242;
   font-size: 1em;
-  /*
-  padding: 0.125em 0.75em 0.25em;
-  */
-  /*
-  padding: 0.25em 0.75em;
-  */
-  padding: 0.125rem 0.5rem 0.25rem;
+  padding: 0.25em 0 0.125em;
 }
 
 .nav-menu a,
@@ -61,24 +59,30 @@ nav.nav-menu span.nav-text strong {
 }
 
 .nav-list {
-  margin: 0;
-  /* bottom padding allows scroll to extend slightly beyond end of list */
-  padding: 0 0 0.5em;
-  width: 100%;
+  margin: 0 0 0 0.8em;
+  padding: 0;
+
 }
 
-.nav-list .nav-list {
-  margin-left: 1em;
-  padding-bottom: 0;
+.nav-menu > .nav-list {
+  margin-bottom: 0.5rem;
+
 }
 
 .nav-item {
-  display: flex;
-  align-items: flex-start;
-  flex-wrap: wrap;
   list-style: none;
-  padding-top: 5px;
-  padding-bottom: 5px;
+  position: relative;
+  /*
+  margin-top: 0.375em;
+  */
+  margin-top: 0.5em;
+
+}
+.nav-item .nav-list {
+  /*
+  margin-bottom: 0.5rem;
+  */
+  margin-bottom: 0.625rem;
 }
 
 ul.nav-list .nav-item .is-current-page,
@@ -95,39 +99,39 @@ ul.nav-list ul.nav-list .nav-item  {
   margin-left: 20px;
 }
 
-.nav-item:not(.is-active) > .nav-list {
-  display: none;
+.nav-item .nav-list {
+  /*
+  margin-bottom: 0.5rem;
+  */
+  margin-bottom: 0.625rem;
+
 }
 
 /* matches list without a title */
 .nav-item[data-depth="0"] > .nav-list:first-child {
   display: block;
-  margin-left: 0;
+  margin: 0;
 }
 
-.nav-item[data-depth="0"] > .nav-list:first-child > .nav-item:first-child {
-  padding-top: 0;
+.nav-item:not(.is-active) > .nav-list {
+  display: none;
 }
 
 .nav-toggle {
-  background: transparent url(../img/caret.svg) no-repeat left center;
-  background-size: 85%;
+  background: transparent url(../img/caret.svg) no-repeat center;
+  background-size: 55%;
   border: none;
   cursor: pointer;
   height: 1.85em;
   outline: none;
-  padding: 0;
-  /* nudge font size and width to fix calculation error in Chrome */
-  font-size: 0.95em;
-  width: 1.0526em;
-}
+  position: absolute;
+  height: 1.35em; /* NOTE must match line-height of text */
+  width: 1.5em;
+  margin-left: -1.5em;
 
-@media (min-width: 769px) {
-  .nav-toggle {
-    height: 1.6em;
-  }
 }
 
+
 .nav-toggle::-moz-focus-inner {
   border: none;
 }
@@ -136,27 +140,7 @@ ul.nav-list ul.nav-list .nav-item  {
   transform: rotate(90deg);
 }
 
-.nav-link,
-.nav-text {
-  display: inline-block;
-  line-height: 1.85;
-  margin-left: 1em;
-  padding-left: 0.25em;
-}
-
-@media (min-width: 769px) {
-  .nav-link,
-  .nav-text {
-    line-height: 1.6;
-  }
-}
-
 .is-current-page > .nav-link,
 .is-current-page > .nav-text {
-  font-weight: bold;
-}
-
-.nav-toggle + .nav-link,
-.nav-toggle + .nav-text {
-  margin-left: 0;
+  font-weight: 500;
 }