Videomaker: Header navigation styles (#4968)

* Add important to active text color
* Add underline to nav items on hover
* Set nav to always be a hamburger menu
* Left align open hamburger menu

Co-authored-by: Ben Dwyer <ben@scruffian.com>

videomaker/assets/theme.css

@@ -81,7 +81,7 @@
 
 a:active {
 	background: var(--wp--custom--color--foreground);
-	color: var(--wp--custom--color--background);
+	color: var(--wp--custom--color--background) !important;
 }
 
 div.post-meta.wp-block-group {
@@ -107,10 +107,18 @@ div.post-meta a {
 	row-gap: 1rem;
 }
 
+.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
+	align-items: flex-start;
+}
+
 .wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
 	row-gap: 0rem;
 }
 
+.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .wp-block-navigation-item > a:hover {
+	text-decoration-line: underline;
+}
+
 .wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .wp-block-navigation-item.current-menu-item > a {
 	text-decoration: underline;
 }

videomaker/sass/_links.scss

@@ -1,4 +1,4 @@
 a:active {
-	background: var(--wp--custom--color--foreground);
-	color: var(--wp--custom--color--background);
+	background: var(--wp--custom--color--foreground) !important;
+	color: var(--wp--custom--color--background) !important;
 }

videomaker/sass/_navigation.scss

@@ -10,9 +10,15 @@
 		}
 
 		.wp-block-navigation__responsive-container-content { // Needed for specificity to beat the navigation block CSS
+			align-items: flex-start;
+
 			.wp-block-navigation-item {
 				row-gap: 0rem;
 
+				> a:hover {
+					text-decoration-line: underline;
+				}
+
 				&.current-menu-item > a {
 					text-decoration: underline;
 				}