From 5b60b9f5875e7f9f1bb1039b302d4e8ae28a16fb Mon Sep 17 00:00:00 2001
From: Oyelakin Mercy <oyelakinmercy68@gmail.com>
Date: Feb 06 2022 16:11:03 +0000
Subject: Fix navigation menu layout

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;
 }