Style appropriately the navigation menu and button

maywood/sass/_full-site-editing.scss

@@ -1,8 +1,16 @@
+@import "../../varia/sass/full-site-editing/imports";
+
 .fse-enabled {
 	.site-header.entry-content {
 		margin-bottom: 0;
 		max-width: 100%;
 		padding: 0;
 		width: 100%;
+
+		@include media(mobile-only) {
+			.main-navigation .menu-primary-container {
+				padding: 0 32px;
+			}
+		}
 	}
 }

maywood/sass/style-child-theme-editor.scss

@@ -102,4 +102,4 @@ body {
  * Full Site Editing
  * - Full Site Editing overrides
  */
- @import "full-site-editing-editor";
+@import "full-site-editing-editor";

maywood/style-editor.css

@@ -1265,12 +1265,12 @@ body {
 	color: #685636;
 }
 
-.footer-navigation {
+.footer-navigation, .site-footer .main-navigation {
 	display: inline;
 }
 
 @media only screen and (min-width: 640px) {
-	.footer-navigation {
+	.footer-navigation, .site-footer .main-navigation {
 		flex: 1 0 50%;
 		order: 2;
 		margin-top: 0;
@@ -1279,37 +1279,37 @@ body {
 	}
 }
 
-.footer-navigation > div {
+.footer-navigation > div, .site-footer .main-navigation > div {
 	display: inline;
 }
 
-.footer-navigation .footer-menu {
+.footer-navigation .footer-menu, .site-footer .main-navigation .footer-menu {
 	color: #686868;
 	margin: 0;
 	padding-left: 0;
 }
 
 @media only screen and (min-width: 640px) {
-	.footer-navigation .footer-menu {
+	.footer-navigation .footer-menu, .site-footer .main-navigation .footer-menu {
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: flex-end;
 	}
 }
 
-.footer-navigation .footer-menu > li {
+.footer-navigation .footer-menu > li, .site-footer .main-navigation .footer-menu > li {
 	display: inline;
 }
 
-.footer-navigation .footer-menu > li:first-of-type > a {
+.footer-navigation .footer-menu > li:first-of-type > a, .site-footer .main-navigation .footer-menu > li:first-of-type > a {
 	padding-left: 0;
 }
 
-.footer-navigation .footer-menu > li:last-of-type {
+.footer-navigation .footer-menu > li:last-of-type, .site-footer .main-navigation .footer-menu > li:last-of-type {
 	padding-right: 0;
 }
 
-.footer-navigation .footer-menu a {
+.footer-navigation .footer-menu a, .site-footer .main-navigation .footer-menu a {
 	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 0.83333rem;
 	font-weight: 700;
@@ -1317,11 +1317,11 @@ body {
 	color: currentColor;
 }
 
-.footer-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited {
+.footer-navigation .footer-menu a:link, .site-footer .main-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited, .site-footer .main-navigation .footer-menu a:visited {
 	color: currentColor;
 }
 
-.footer-navigation .footer-menu a:hover {
+.footer-navigation .footer-menu a:hover, .site-footer .main-navigation .footer-menu a:hover {
 	color: #685636;
 }
 
@@ -1359,6 +1359,98 @@ body {
 	font-size: 15px;
 }
 
+.site-header .main-navigation {
+	/**
+ * Placeholder button style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+	/**
+ * Block Options
+ */
+}
+
+.site-header .main-navigation button,
+.site-header .main-navigation .button,
+.site-header .main-navigation input[type="submit"],
+.site-header .main-navigation .wp-block-button__link,
+.site-header .main-navigation .wp-block-file__button {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 700;
+	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-size: 0.83333rem;
+	background-color: #897248;
+	border-radius: 5px;
+	border-width: 0;
+	padding: 16px 16px;
+}
+
+.site-header .main-navigation button:before,
+.site-header .main-navigation .button:before,
+.site-header .main-navigation input[type="submit"]:before,
+.site-header .main-navigation .wp-block-button__link:before,
+.site-header .main-navigation .wp-block-file__button:before, .site-header .main-navigation button:after,
+.site-header .main-navigation .button:after,
+.site-header .main-navigation input[type="submit"]:after,
+.site-header .main-navigation .wp-block-button__link:after,
+.site-header .main-navigation .wp-block-file__button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.site-header .main-navigation button:before,
+.site-header .main-navigation .button:before,
+.site-header .main-navigation input[type="submit"]:before,
+.site-header .main-navigation .wp-block-button__link:before,
+.site-header .main-navigation .wp-block-file__button:before {
+	margin-bottom: -0.12em;
+}
+
+.site-header .main-navigation button:after,
+.site-header .main-navigation .button:after,
+.site-header .main-navigation input[type="submit"]:after,
+.site-header .main-navigation .wp-block-button__link:after,
+.site-header .main-navigation .wp-block-file__button:after {
+	margin-top: -0.11em;
+}
+
+.site-header .main-navigation button:hover,
+.site-header .main-navigation .button:hover,
+.site-header .main-navigation input:hover[type="submit"],
+.site-header .main-navigation .wp-block-button__link:hover,
+.site-header .main-navigation .wp-block-file__button:hover, .site-header .main-navigation button:focus,
+.site-header .main-navigation .button:focus,
+.site-header .main-navigation input:focus[type="submit"],
+.site-header .main-navigation .wp-block-button__link:focus,
+.site-header .main-navigation .wp-block-file__button:focus, .site-header .main-navigation button.has-focus,
+.site-header .main-navigation .has-focus.button,
+.site-header .main-navigation input.has-focus[type="submit"],
+.site-header .main-navigation .has-focus.wp-block-button__link,
+.site-header .main-navigation .has-focus.wp-block-file__button {
+	color: white;
+	background-color: #685636;
+}
+
+.site-header .main-navigation .wp-block-button.is-style-outline .wp-block-button__link {
+	color: #897248;
+	background: transparent;
+	border: 2px solid currentcolor;
+	padding: 14px 16px;
+}
+
+.site-header .main-navigation .wp-block-button.is-style-outline .wp-block-button__link:hover, .site-header .main-navigation .wp-block-button.is-style-outline .wp-block-button__link:focus, .site-header .main-navigation .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
+	color: #685636;
+}
+
+.site-header .main-navigation .wp-block-button.is-style-squared .wp-block-button__link {
+	border-radius: 0;
+}
+
 .site-header .main-navigation a {
 	font-size: 21.6px;
 }
@@ -1369,23 +1461,24 @@ body {
 	}
 }
 
+.site-footer .main-navigation {
+	display: block;
+}
+
+.site-footer .main-navigation .hide-visually,
+.site-footer .main-navigation #toggle-menu {
+	display: none;
+}
+
 @media only screen and (max-width: 559px) {
-	.main-navigation {
-		background-color: #897248;
-		border-radius: 5px;
-		color: white;
-		display: inline-block;
-		font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-		font-size: 18px;
-		font-weight: 700;
-		line-height: 1;
-		padding: 16px 16px;
+	.site-footer .main-navigation .menu-primary-container {
+		display: block;
 	}
-	.main-navigation:before {
-		content: "Menu";
+	.site-footer .main-navigation li {
+		width: auto;
 	}
-	.main-navigation:after {
-		content: "+";
+	.site-footer .main-navigation li .sub-menu {
+		display: none;
 	}
 }
 

maywood/style-rtl.css

@@ -2332,6 +2332,7 @@ table th,
 }
 
 .main-navigation #toggle-menu {
+	background-color: red;
 	display: inline-block;
 	margin: 0;
 }
@@ -2604,12 +2605,12 @@ table th,
 	color: #685636;
 }
 
-.footer-navigation {
+.footer-navigation, .fse-enabled .site-footer .main-navigation {
 	display: inline;
 }
 
 @media only screen and (min-width: 640px) {
-	.footer-navigation {
+	.footer-navigation, .fse-enabled .site-footer .main-navigation {
 		flex: 1 0 50%;
 		order: 2;
 		margin-top: 0;
@@ -2618,37 +2619,37 @@ table th,
 	}
 }
 
-.footer-navigation > div {
+.footer-navigation > div, .fse-enabled .site-footer .main-navigation > div {
 	display: inline;
 }
 
-.footer-navigation .footer-menu {
+.footer-navigation .footer-menu, .fse-enabled .site-footer .main-navigation .footer-menu {
 	color: #686868;
 	margin: 0;
 	padding-right: 0;
 }
 
 @media only screen and (min-width: 640px) {
-	.footer-navigation .footer-menu {
+	.footer-navigation .footer-menu, .fse-enabled .site-footer .main-navigation .footer-menu {
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: flex-end;
 	}
 }
 
-.footer-navigation .footer-menu > li {
+.footer-navigation .footer-menu > li, .fse-enabled .site-footer .main-navigation .footer-menu > li {
 	display: inline;
 }
 
-.footer-navigation .footer-menu > li:first-of-type > a {
+.footer-navigation .footer-menu > li:first-of-type > a, .fse-enabled .site-footer .main-navigation .footer-menu > li:first-of-type > a {
 	padding-right: 0;
 }
 
-.footer-navigation .footer-menu > li:last-of-type {
+.footer-navigation .footer-menu > li:last-of-type, .fse-enabled .site-footer .main-navigation .footer-menu > li:last-of-type {
 	padding-left: 0;
 }
 
-.footer-navigation .footer-menu a {
+.footer-navigation .footer-menu a, .fse-enabled .site-footer .main-navigation .footer-menu a {
 	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 0.83333rem;
 	font-weight: 700;
@@ -2656,11 +2657,11 @@ table th,
 	color: currentColor;
 }
 
-.footer-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited {
+.footer-navigation .footer-menu a:link, .fse-enabled .site-footer .main-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited, .fse-enabled .site-footer .main-navigation .footer-menu a:visited {
 	color: currentColor;
 }
 
-.footer-navigation .footer-menu a:hover {
+.footer-navigation .footer-menu a:hover, .fse-enabled .site-footer .main-navigation .footer-menu a:hover {
 	color: #685636;
 }
 
@@ -3768,11 +3769,11 @@ p:not(.site-title) a:hover {
 /**
  * Footer Navigation
  */
-.footer-navigation .footer-menu a {
+.footer-navigation .footer-menu a, .fse-enabled .site-footer .main-navigation .footer-menu a {
 	padding: 0 8px;
 }
 
-.footer-navigation .footer-menu > li:last-of-type {
+.footer-navigation .footer-menu > li:last-of-type, .fse-enabled .site-footer .main-navigation .footer-menu > li:last-of-type {
 	margin-left: -8px;
 }
 
@@ -3780,9 +3781,36 @@ p:not(.site-title) a:hover {
  * Full Site Editing
  * - Full Site Editing overrides
  */
+.fse-enabled .site-footer .main-navigation {
+	display: block;
+}
+
+.fse-enabled .site-footer .main-navigation .hide-visually,
+.fse-enabled .site-footer .main-navigation #toggle-menu {
+	display: none;
+}
+
+@media only screen and (max-width: 559px) {
+	.fse-enabled .site-footer .main-navigation .menu-primary-container {
+		display: block;
+	}
+	.fse-enabled .site-footer .main-navigation li {
+		width: auto;
+	}
+	.fse-enabled .site-footer .main-navigation li .sub-menu {
+		display: none;
+	}
+}
+
 .fse-enabled .site-header.entry-content {
 	margin-bottom: 0;
 	max-width: 100%;
 	padding: 0;
 	width: 100%;
 }
+
+@media only screen and (max-width: 559px) {
+	.fse-enabled .site-header.entry-content .main-navigation .menu-primary-container {
+		padding: 0 32px;
+	}
+}

maywood/style.css

@@ -2621,12 +2621,12 @@ table th,
 	color: #685636;
 }
 
-.footer-navigation {
+.footer-navigation, .fse-enabled .site-footer .main-navigation {
 	display: inline;
 }
 
 @media only screen and (min-width: 640px) {
-	.footer-navigation {
+	.footer-navigation, .fse-enabled .site-footer .main-navigation {
 		flex: 1 0 50%;
 		order: 2;
 		margin-top: 0;
@@ -2635,37 +2635,37 @@ table th,
 	}
 }
 
-.footer-navigation > div {
+.footer-navigation > div, .fse-enabled .site-footer .main-navigation > div {
 	display: inline;
 }
 
-.footer-navigation .footer-menu {
+.footer-navigation .footer-menu, .fse-enabled .site-footer .main-navigation .footer-menu {
 	color: #686868;
 	margin: 0;
 	padding-left: 0;
 }
 
 @media only screen and (min-width: 640px) {
-	.footer-navigation .footer-menu {
+	.footer-navigation .footer-menu, .fse-enabled .site-footer .main-navigation .footer-menu {
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: flex-end;
 	}
 }
 
-.footer-navigation .footer-menu > li {
+.footer-navigation .footer-menu > li, .fse-enabled .site-footer .main-navigation .footer-menu > li {
 	display: inline;
 }
 
-.footer-navigation .footer-menu > li:first-of-type > a {
+.footer-navigation .footer-menu > li:first-of-type > a, .fse-enabled .site-footer .main-navigation .footer-menu > li:first-of-type > a {
 	padding-left: 0;
 }
 
-.footer-navigation .footer-menu > li:last-of-type {
+.footer-navigation .footer-menu > li:last-of-type, .fse-enabled .site-footer .main-navigation .footer-menu > li:last-of-type {
 	padding-right: 0;
 }
 
-.footer-navigation .footer-menu a {
+.footer-navigation .footer-menu a, .fse-enabled .site-footer .main-navigation .footer-menu a {
 	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 0.83333rem;
 	font-weight: 700;
@@ -2673,11 +2673,11 @@ table th,
 	color: currentColor;
 }
 
-.footer-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited {
+.footer-navigation .footer-menu a:link, .fse-enabled .site-footer .main-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited, .fse-enabled .site-footer .main-navigation .footer-menu a:visited {
 	color: currentColor;
 }
 
-.footer-navigation .footer-menu a:hover {
+.footer-navigation .footer-menu a:hover, .fse-enabled .site-footer .main-navigation .footer-menu a:hover {
 	color: #685636;
 }
 
@@ -3797,11 +3797,11 @@ p:not(.site-title) a:hover {
 /**
  * Footer Navigation
  */
-.footer-navigation .footer-menu a {
+.footer-navigation .footer-menu a, .fse-enabled .site-footer .main-navigation .footer-menu a {
 	padding: 0 8px;
 }
 
-.footer-navigation .footer-menu > li:last-of-type {
+.footer-navigation .footer-menu > li:last-of-type, .fse-enabled .site-footer .main-navigation .footer-menu > li:last-of-type {
 	margin-right: -8px;
 }
 
@@ -3809,9 +3809,36 @@ p:not(.site-title) a:hover {
  * Full Site Editing
  * - Full Site Editing overrides
  */
+.fse-enabled .site-footer .main-navigation {
+	display: block;
+}
+
+.fse-enabled .site-footer .main-navigation .hide-visually,
+.fse-enabled .site-footer .main-navigation #toggle-menu {
+	display: none;
+}
+
+@media only screen and (max-width: 559px) {
+	.fse-enabled .site-footer .main-navigation .menu-primary-container {
+		display: block;
+	}
+	.fse-enabled .site-footer .main-navigation li {
+		width: auto;
+	}
+	.fse-enabled .site-footer .main-navigation li .sub-menu {
+		display: none;
+	}
+}
+
 .fse-enabled .site-header.entry-content {
 	margin-bottom: 0;
 	max-width: 100%;
 	padding: 0;
 	width: 100%;
 }
+
+@media only screen and (max-width: 559px) {
+	.fse-enabled .site-header.entry-content .main-navigation .menu-primary-container {
+		padding: 0 32px;
+	}
+}

varia/sass/full-site-editing/_editor.scss

@@ -36,8 +36,12 @@
 		font-size: 15px;
 	}
 
-	.main-navigation a {
-		font-size: 21.6px;
+	.main-navigation {
+		@import "../blocks/button/style";
+
+		a {
+			font-size: 21.6px;
+		}
 	}
 }
 

varia/style-editor.css

@@ -1248,6 +1248,98 @@ table th,
 	font-size: 15px;
 }
 
+.site-header .main-navigation {
+	/**
+ * Placeholder button style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+	/**
+ * Block Options
+ */
+}
+
+.site-header .main-navigation button,
+.site-header .main-navigation .button,
+.site-header .main-navigation input[type="submit"],
+.site-header .main-navigation .wp-block-button__link,
+.site-header .main-navigation .wp-block-file__button {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: sans-serif;
+	font-size: 1.2rem;
+	background-color: blue;
+	border-radius: 9px;
+	border-width: 0;
+	padding: 16px 16px;
+}
+
+.site-header .main-navigation button:before,
+.site-header .main-navigation .button:before,
+.site-header .main-navigation input[type="submit"]:before,
+.site-header .main-navigation .wp-block-button__link:before,
+.site-header .main-navigation .wp-block-file__button:before, .site-header .main-navigation button:after,
+.site-header .main-navigation .button:after,
+.site-header .main-navigation input[type="submit"]:after,
+.site-header .main-navigation .wp-block-button__link:after,
+.site-header .main-navigation .wp-block-file__button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.site-header .main-navigation button:before,
+.site-header .main-navigation .button:before,
+.site-header .main-navigation input[type="submit"]:before,
+.site-header .main-navigation .wp-block-button__link:before,
+.site-header .main-navigation .wp-block-file__button:before {
+	margin-bottom: -0.12em;
+}
+
+.site-header .main-navigation button:after,
+.site-header .main-navigation .button:after,
+.site-header .main-navigation input[type="submit"]:after,
+.site-header .main-navigation .wp-block-button__link:after,
+.site-header .main-navigation .wp-block-file__button:after {
+	margin-top: -0.11em;
+}
+
+.site-header .main-navigation button:hover,
+.site-header .main-navigation .button:hover,
+.site-header .main-navigation input:hover[type="submit"],
+.site-header .main-navigation .wp-block-button__link:hover,
+.site-header .main-navigation .wp-block-file__button:hover, .site-header .main-navigation button:focus,
+.site-header .main-navigation .button:focus,
+.site-header .main-navigation input:focus[type="submit"],
+.site-header .main-navigation .wp-block-button__link:focus,
+.site-header .main-navigation .wp-block-file__button:focus, .site-header .main-navigation button.has-focus,
+.site-header .main-navigation .has-focus.button,
+.site-header .main-navigation input.has-focus[type="submit"],
+.site-header .main-navigation .has-focus.wp-block-button__link,
+.site-header .main-navigation .has-focus.wp-block-file__button {
+	color: white;
+	background-color: indigo;
+}
+
+.site-header .main-navigation .wp-block-button.is-style-outline .wp-block-button__link {
+	color: blue;
+	background: transparent;
+	border: 2px solid currentcolor;
+	padding: 14px 16px;
+}
+
+.site-header .main-navigation .wp-block-button.is-style-outline .wp-block-button__link:hover, .site-header .main-navigation .wp-block-button.is-style-outline .wp-block-button__link:focus, .site-header .main-navigation .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
+	color: indigo;
+}
+
+.site-header .main-navigation .wp-block-button.is-style-squared .wp-block-button__link {
+	border-radius: 0;
+}
+
 .site-header .main-navigation a {
 	font-size: 21.6px;
 }