Browse Source

styles for dropdown menu

Maggie Cabrera 4 years ago
parent
commit
e60a1e0050

+ 4 - 12
alves/style-rtl.css

@@ -4483,8 +4483,6 @@ body:not(.fse-enabled) #masthead {
 		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		display: grid;
-		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
 	}
@@ -4496,6 +4494,7 @@ body:not(.fse-enabled) #masthead {
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.5;
 		padding: 12px;
 		display: inline-block;
 		text-align: center;
@@ -4513,17 +4512,10 @@ body:not(.fse-enabled) #masthead {
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;
-		left: 16px;
-		right: 16px;
-		background: #fafafa;
+		left: 0;
+		right: 0;
+		background: #ffffff;
 		padding: 0 16px 8px;
-		border: 1px solid #3E7D98;
-		border-radius: 4px;
-		text-align: right;
-	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container a {
-		padding: 8px 0;
-		line-height: 1;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
 		text-align: right;

+ 4 - 12
alves/style.css

@@ -4512,8 +4512,6 @@ body:not(.fse-enabled) #masthead {
 		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		display: grid;
-		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
 	}
@@ -4525,6 +4523,7 @@ body:not(.fse-enabled) #masthead {
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.5;
 		padding: 12px;
 		display: inline-block;
 		text-align: center;
@@ -4542,17 +4541,10 @@ body:not(.fse-enabled) #masthead {
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;
-		right: 16px;
-		left: 16px;
-		background: #fafafa;
+		right: 0;
+		left: 0;
+		background: #ffffff;
 		padding: 0 16px 8px;
-		border: 1px solid #3E7D98;
-		border-radius: 4px;
-		text-align: left;
-	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container a {
-		padding: 8px 0;
-		line-height: 1;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
 		text-align: left;

+ 4 - 12
barnsbury/style-rtl.css

@@ -4428,8 +4428,6 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		display: grid;
-		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
 	}
@@ -4441,6 +4439,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.5;
 		padding: 12px;
 		display: inline-block;
 		text-align: center;
@@ -4458,17 +4457,10 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;
-		left: 16px;
-		right: 16px;
-		background: #FDF9EC;
+		left: 0;
+		right: 0;
+		background: #FFFDF6;
 		padding: 0 16px 8px;
-		border: 1px solid #3C2323;
-		border-radius: 5px;
-		text-align: right;
-	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container a {
-		padding: 8px 0;
-		line-height: 1;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
 		text-align: right;

+ 4 - 12
barnsbury/style.css

@@ -4457,8 +4457,6 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		display: grid;
-		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
 	}
@@ -4470,6 +4468,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.5;
 		padding: 12px;
 		display: inline-block;
 		text-align: center;
@@ -4487,17 +4486,10 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;
-		right: 16px;
-		left: 16px;
-		background: #FDF9EC;
+		right: 0;
+		left: 0;
+		background: #FFFDF6;
 		padding: 0 16px 8px;
-		border: 1px solid #3C2323;
-		border-radius: 5px;
-		text-align: left;
-	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container a {
-		padding: 8px 0;
-		line-height: 1;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
 		text-align: left;

+ 4 - 12
dalston/style-rtl.css

@@ -4305,8 +4305,6 @@ a {
 		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		display: grid;
-		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
 	}
@@ -4318,6 +4316,7 @@ a {
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.5;
 		padding: 12px;
 		display: inline-block;
 		text-align: center;
@@ -4335,17 +4334,10 @@ a {
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;
-		left: 16px;
-		right: 16px;
-		background: #FAFAFA;
+		left: 0;
+		right: 0;
+		background: #FFFFFF;
 		padding: 0 16px 8px;
-		border: 1px solid #CCCCCC;
-		border-radius: 4.75px;
-		text-align: right;
-	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container a {
-		padding: 8px 0;
-		line-height: 1;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
 		text-align: right;

+ 4 - 12
dalston/style.css

@@ -4334,8 +4334,6 @@ a {
 		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		display: grid;
-		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
 	}
@@ -4347,6 +4345,7 @@ a {
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.5;
 		padding: 12px;
 		display: inline-block;
 		text-align: center;
@@ -4364,17 +4363,10 @@ a {
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;
-		right: 16px;
-		left: 16px;
-		background: #FAFAFA;
+		right: 0;
+		left: 0;
+		background: #FFFFFF;
 		padding: 0 16px 8px;
-		border: 1px solid #CCCCCC;
-		border-radius: 4.75px;
-		text-align: left;
-	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container a {
-		padding: 8px 0;
-		line-height: 1;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
 		text-align: left;

+ 4 - 12
hever/style-rtl.css

@@ -4505,8 +4505,6 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		display: grid;
-		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
 	}
@@ -4518,6 +4516,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.5;
 		padding: 12px;
 		display: inline-block;
 		text-align: center;
@@ -4535,17 +4534,10 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;
-		left: 16px;
-		right: 16px;
-		background: #F8F8F8;
+		left: 0;
+		right: 0;
+		background: white;
 		padding: 0 16px 8px;
-		border: 1px solid #C5C5C5;
-		border-radius: 5px;
-		text-align: right;
-	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container a {
-		padding: 8px 0;
-		line-height: 1;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
 		text-align: right;

+ 4 - 12
hever/style.css

@@ -4534,8 +4534,6 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		display: grid;
-		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
 	}
@@ -4547,6 +4545,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.5;
 		padding: 12px;
 		display: inline-block;
 		text-align: center;
@@ -4564,17 +4563,10 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;
-		right: 16px;
-		left: 16px;
-		background: #F8F8F8;
+		right: 0;
+		left: 0;
+		background: white;
 		padding: 0 16px 8px;
-		border: 1px solid #C5C5C5;
-		border-radius: 5px;
-		text-align: left;
-	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container a {
-		padding: 8px 0;
-		line-height: 1;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
 		text-align: left;

+ 4 - 12
mayland/style-rtl.css

@@ -4334,8 +4334,6 @@ strong {
 		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		display: grid;
-		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
 	}
@@ -4347,6 +4345,7 @@ strong {
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.5;
 		padding: 12px;
 		display: inline-block;
 		text-align: center;
@@ -4364,17 +4363,10 @@ strong {
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;
-		left: 16px;
-		right: 16px;
-		background: #f2f2f2;
+		left: 0;
+		right: 0;
+		background: #ffffff;
 		padding: 0 16px 8px;
-		border: 1px solid #e6e6e6;
-		border-radius: 5px;
-		text-align: right;
-	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container a {
-		padding: 8px 0;
-		line-height: 1;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
 		text-align: right;

+ 4 - 12
mayland/style.css

@@ -4363,8 +4363,6 @@ strong {
 		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		display: grid;
-		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
 	}
@@ -4376,6 +4374,7 @@ strong {
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.5;
 		padding: 12px;
 		display: inline-block;
 		text-align: center;
@@ -4393,17 +4392,10 @@ strong {
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;
-		right: 16px;
-		left: 16px;
-		background: #f2f2f2;
+		right: 0;
+		left: 0;
+		background: #ffffff;
 		padding: 0 16px 8px;
-		border: 1px solid #e6e6e6;
-		border-radius: 5px;
-		text-align: left;
-	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container a {
-		padding: 8px 0;
-		line-height: 1;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
 		text-align: left;

+ 6 - 0
morden/sass/_extra-child-theme.scss

@@ -618,5 +618,11 @@ article .entry-header .entry-title,
 		#masthead .site-header-wrap > *:not(.site-logo) {
 			margin: 0;
 		}
+		.site-header #site-navigation.main-navigation {
+			.main-menu-container {
+				margin: 0 (-2 * $baseline-unit);
+				background: #{map-deep-get($config-global, "color", "foreground", "default")};
+			}
+		}
 	}
 }

+ 8 - 12
morden/style-rtl.css

@@ -4598,8 +4598,6 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		display: grid;
-		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
 	}
@@ -4611,6 +4609,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.5;
 		padding: 12px;
 		display: inline-block;
 		text-align: center;
@@ -4628,17 +4627,10 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;
-		left: 16px;
-		right: 16px;
-		background: #F8F8F8;
+		left: 0;
+		right: 0;
+		background: white;
 		padding: 0 16px 8px;
-		border: 1px solid #C5C5C5;
-		border-radius: 5px;
-		text-align: right;
-	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container a {
-		padding: 8px 0;
-		line-height: 1;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
 		text-align: right;
@@ -4655,6 +4647,10 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	.mobile-nav-side #masthead .site-header-wrap > *:not(.site-logo) {
 		margin: 0;
 	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container {
+		margin: 0 -16px;
+		background: #303030;
+	}
 }
 
 /**

+ 8 - 12
morden/style.css

@@ -4627,8 +4627,6 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		display: grid;
-		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
 	}
@@ -4640,6 +4638,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.5;
 		padding: 12px;
 		display: inline-block;
 		text-align: center;
@@ -4657,17 +4656,10 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;
-		right: 16px;
-		left: 16px;
-		background: #F8F8F8;
+		right: 0;
+		left: 0;
+		background: white;
 		padding: 0 16px 8px;
-		border: 1px solid #C5C5C5;
-		border-radius: 5px;
-		text-align: left;
-	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container a {
-		padding: 8px 0;
-		line-height: 1;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
 		text-align: left;
@@ -4684,6 +4676,10 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	.mobile-nav-side #masthead .site-header-wrap > *:not(.site-logo) {
 		margin: 0;
 	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container {
+		margin: 0 -16px;
+		background: #303030;
+	}
 }
 
 /**

+ 17 - 0
rivington/sass/_extra-child-theme.scss

@@ -460,3 +460,20 @@ a {
 
 // Updates the Mobile Navigation to be next to the site title.
 @import "../../varia/sass/components/header/_site-mobile-nav-side";
+
+@include media(mobile-only) {
+	.mobile-nav-side {
+		.site-header.has-menu {
+			&.has-logo .site-branding {
+				grid-area: site-logo;
+				justify-self: center;
+			}
+			&:not(.has-logo) .site-branding {
+				grid-area: site-title;
+			}
+			.site-logo {
+				grid-area: unset;
+			}
+		}
+	}
+}

+ 17 - 12
rivington/style-rtl.css

@@ -4461,8 +4461,6 @@ p:not(.site-title) a:hover {
 		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		display: grid;
-		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
 	}
@@ -4474,6 +4472,7 @@ p:not(.site-title) a:hover {
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.5;
 		padding: 12px;
 		display: inline-block;
 		text-align: center;
@@ -4491,17 +4490,10 @@ p:not(.site-title) a:hover {
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;
-		left: 16px;
-		right: 16px;
-		background: #0d1f55;
+		left: 0;
+		right: 0;
+		background: #060f29;
 		padding: 0 16px 8px;
-		border: 1px solid #353a46;
-		border-radius: 4.5px;
-		text-align: right;
-	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container a {
-		padding: 8px 0;
-		line-height: 1;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
 		text-align: right;
@@ -4513,3 +4505,16 @@ p:not(.site-title) a:hover {
 		border-radius: 4.5px;
 	}
 }
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .site-header.has-menu.has-logo .site-branding {
+		grid-area: site-logo;
+		justify-self: center;
+	}
+	.mobile-nav-side .site-header.has-menu:not(.has-logo) .site-branding {
+		grid-area: site-title;
+	}
+	.mobile-nav-side .site-header.has-menu .site-logo {
+		grid-area: unset;
+	}
+}

+ 17 - 12
rivington/style.css

@@ -4490,8 +4490,6 @@ p:not(.site-title) a:hover {
 		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		display: grid;
-		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
 	}
@@ -4503,6 +4501,7 @@ p:not(.site-title) a:hover {
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.5;
 		padding: 12px;
 		display: inline-block;
 		text-align: center;
@@ -4520,17 +4519,10 @@ p:not(.site-title) a:hover {
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;
-		right: 16px;
-		left: 16px;
-		background: #0d1f55;
+		right: 0;
+		left: 0;
+		background: #060f29;
 		padding: 0 16px 8px;
-		border: 1px solid #353a46;
-		border-radius: 4.5px;
-		text-align: left;
-	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container a {
-		padding: 8px 0;
-		line-height: 1;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
 		text-align: left;
@@ -4542,3 +4534,16 @@ p:not(.site-title) a:hover {
 		border-radius: 4.5px;
 	}
 }
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .site-header.has-menu.has-logo .site-branding {
+		grid-area: site-logo;
+		justify-self: center;
+	}
+	.mobile-nav-side .site-header.has-menu:not(.has-logo) .site-branding {
+		grid-area: site-title;
+	}
+	.mobile-nav-side .site-header.has-menu .site-logo {
+		grid-area: unset;
+	}
+}

+ 4 - 18
varia/sass/components/header/_site-mobile-nav-side.scss

@@ -53,11 +53,6 @@
 		}
 
 		.site-header #site-navigation.main-navigation {
-			display: grid;
-			grid-template-areas: 
-				"menu-toggle cart-toggle"
-				"dropdown-menu dropdown-menu";
-
 			margin: 0;
 			justify-self: end;
 			//text-align: right;
@@ -72,6 +67,7 @@
 
 			#toggle-cart[for="woocommerce-toggle"].button,
 			#toggle-menu {
+				line-height: 1.5;
 				padding: (1.5 * $baseline-unit);
 				display: inline-block;
 				text-align: center;
@@ -90,20 +86,10 @@
 				margin-top: $baseline-unit;
 				position: absolute;
 				z-index: 100;
-				right: 2 * $baseline-unit;
-				left: 2 * $baseline-unit;
-				background: #{map-deep-get($config-global, "color", "background", "light") };
+				right: 0;
+				left: 0;
+				background: #{map-deep-get($config-global, "color", "background", "default") };
 				padding: 0 (2 * $baseline-unit) $baseline-unit;
-				border: 1px solid #{map-deep-get( $config-global,"color","border","default")};
-				border-radius: #{map-deep-get($config-global, "border-radius", "xs" )};
-				text-align: left;
-			}
-
-			.main-menu-container {
-				a {
-					padding: $baseline-unit 0;
-					line-height: 1;
-				}
 			}
 
 			.woocommerce-menu-container {