styled navigation for big screens, added color for bottom main menu

sass/abstracts/variables/_colors.scss

@@ -1,5 +1,6 @@
 $color__white: #fff;
 $color__white-dark: #fdfdfd;
+$color__grey-lighter: #eee;
 $color__grey-light: #ccc;
 $color__grey-dark: #666;
 $color__black-light: #101010;

sass/components/navigation/_navigation.scss

@@ -58,48 +58,72 @@
 	}
 
 	a {
-		display: block;
+		display: flex;
+		align-items: center;
+		min-height: 100%;
+		padding: 0 1rem;
 		text-decoration: none;
+		font-size: 1rem;
 	}
 
 	.current_page_item > a,
 	.current-menu-item > a,
 	.current_page_ancestor > a,
 	.current-menu-ancestor > a {
+		font-weight: bold;
 	}
+	.current-menu-item::after {
+    border-bottom: 2px solid #000;
+    display: block;
+    content: "";
+    width: 60%;
+	  margin: 0 20%;
+  }
 }
 
+.main-navigation {
+}
+.secondary-navigation {
+	padding: 1.5rem 0;
+	a {
+		text-transform: uppercase;
+	}
+}
 /* Small menu. */
 .menu-toggle,
 .main-navigation.toggled ul {
 	display: block;
 }
-/* secondary navigation */
-.secondary-navigation ul  {
-	display: flex;
-}
 
 @media screen and (min-width: 37.5em) {
   .site-branding {
-   // display: inline-block;
-   // float: left;
+   //display: inline-block;
+   //float: left;
   }
 	.custom-logo {
     max-width: 11rem;
     margin: 1rem;
   }
-  .menu-primary-menu-container,
-  .menu-secondary-menu-container {
-    display: flex;
-    justify-content: end;
-  }
+  .menu-primary-menu-container {
+		height: 100%;
+	}
+  //.menu-primary-menu-container,
+  //.menu-secondary-menu-container {
+  //  display: flex;
+  //  justify-content: end;
+  //}
 	.menu-toggle {
 		display: none;
 	}
 
 	.main-navigation ul {
 		display: flex;
+		justify-content: end;
+		height:100%;
 	}
+  .secondary-navigation ul  {
+  	display: flex;
+  }
 }
 
 .comment-navigation,

sass/layouts/_no-sidebar.scss

@@ -1,5 +1,4 @@
 .no-sidebar {
-
 	.site {
 		display: grid;
 		grid-template-columns: auto;
@@ -13,14 +12,16 @@
 	}
 	.site-header {
 		.main {
-		  display:flex;
-		  align-items: center;
-		  justify-content: space-between;
+		 // display:flex;
+		 // align-items: center;
+		 // justify-content: space-between;
+		  display: grid;
+      grid-template-columns: 1fr 4fr;
+			border-bottom: 1px solid $color__grey-lighter;
 		}
 		.secondary {
 		  display:flex;
 		  justify-content: center;
-			border-top: 1px solid $color__grey-light;
 		}
 	}
 }

style.css

@@ -684,15 +684,14 @@ textarea {
 }
 
 .no-sidebar .site-header .main {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
+	display: grid;
+	grid-template-columns: 1fr 4fr;
+	border-bottom: 1px solid #eee;
 }
 
 .no-sidebar .site-header .secondary {
 	display: flex;
 	justify-content: center;
-	border-top: 1px solid #ccc;
 }
 
 /*--------------------------------------------------------------
@@ -743,8 +742,38 @@ textarea {
 }
 
 .main-navigation a, .secondary-navigation a {
-	display: block;
+	display: flex;
+	align-items: center;
+	min-height: 100%;
+	padding: 0 1rem;
 	text-decoration: none;
+	font-size: 1rem;
+}
+
+.main-navigation .current_page_item > a,
+.main-navigation .current-menu-item > a,
+.main-navigation .current_page_ancestor > a,
+.main-navigation .current-menu-ancestor > a, .secondary-navigation .current_page_item > a,
+.secondary-navigation .current-menu-item > a,
+.secondary-navigation .current_page_ancestor > a,
+.secondary-navigation .current-menu-ancestor > a {
+	font-weight: bold;
+}
+
+.main-navigation .current-menu-item::after, .secondary-navigation .current-menu-item::after {
+	border-bottom: 2px solid #000;
+	display: block;
+	content: "";
+	width: 60%;
+	margin: 0 20%;
+}
+
+.secondary-navigation {
+	padding: 1.5rem 0;
+}
+
+.secondary-navigation a {
+	text-transform: uppercase;
 }
 
 /* Small menu. */
@@ -753,26 +782,24 @@ textarea {
 	display: block;
 }
 
-/* secondary navigation */
-.secondary-navigation ul {
-	display: flex;
-}
-
 @media screen and (min-width: 37.5em) {
 	.custom-logo {
 		max-width: 11rem;
 		margin: 1rem;
 	}
-	.menu-primary-menu-container,
-	.menu-secondary-menu-container {
-		display: flex;
-		justify-content: end;
+	.menu-primary-menu-container {
+		height: 100%;
 	}
 	.menu-toggle {
 		display: none;
 	}
 	.main-navigation ul {
 		display: flex;
+		justify-content: end;
+		height: 100%;
+	}
+	.secondary-navigation ul {
+		display: flex;
 	}
 }