Revamped nav styles

danbru1989 · Jan 14, 2020 · 78dea93 · 78dea93
1 parent 2168dfc
commit 78dea93
Show file tree

Hide file tree

Showing 11 changed files with 97 additions and 149 deletions.
diff --git a/README.md b/README.md
@@ -3,6 +3,8 @@
 This is the custom Genesis starter theme for Brubaker Design Services. It provides a modular file structure and SASS partials for quick Wordpress developement. The Genesis Sample theme provided the foundation for this starter theme.
 
 ## Change Log
+2.2.0 – Simplified and revamped navigation styles to make development process faster.
+
 2.1.1 – Fixed js suffix problem.
 
 2.1.0 – Added better color palette.

diff --git a/assets/css/main.css b/assets/css/main.css
diff --git a/assets/scss/components/navigation/_base.scss b/assets/scss/components/navigation/_base.scss
@@ -1,6 +1,10 @@
 // ========== Base ========== //
 
 
+// Navigation Settings.
+$navigation__breakpoint         : l;
+$navigation__sub-menu--width    : 200px;
+
 
 .genesis-nav-menu {
 	display: flex;
@@ -21,7 +25,6 @@
 		a {
 			flex: 1;
 			outline-offset: -1px;
-			padding: 15px;
 			text-decoration: none !important;
 		}
 	}
@@ -32,6 +35,7 @@
 		left: -9999px;
 		opacity: 1;
 		padding-left: $mobile-spacing;
+		width: $navigation__sub-menu--width;
 		z-index: 99;
 
 		@include media($navigation__breakpoint) {
@@ -63,4 +67,4 @@
         font-family: dashicons;
         transition: 0.4s ease-in-out;
 	}
-}
+}
diff --git a/assets/scss/components/navigation/_layout--nav-below-header--left-submenus.scss b/assets/scss/components/navigation/_layout--nav-below-header--left-submenus.scss
@@ -14,7 +14,7 @@
 		@include media($navigation__breakpoint) {
 			right: 0;
 			.sub-menu {
-				right: #{$navigation__nav-primary-sub-menu--width};
+				right: #{$navigation__sub-menu--width};
 				box-shadow: -1px 1px 2px $color--shadow;
 			}	
 		}	

diff --git a/assets/scss/components/navigation/_layout--nav-below-header--right-submenus.scss b/assets/scss/components/navigation/_layout--nav-below-header--right-submenus.scss
@@ -13,7 +13,7 @@
 		@include media($navigation__breakpoint) {
 			left: 0;
 			.sub-menu {
-				left: $navigation__nav-primary-sub-menu--width;
+				left: $navigation__sub-menu--width;
 				box-shadow: 1px 1px 2px $color--shadow;
 			}	
 		}	

diff --git a/assets/scss/components/navigation/_layout--nav-right-header--left-submenus.scss b/assets/scss/components/navigation/_layout--nav-right-header--left-submenus.scss
@@ -40,7 +40,7 @@
 		@include media($navigation__breakpoint) {
 			right: 0;
 			.sub-menu {
-				right: #{$navigation__nav-primary-sub-menu--width};
+				right: #{$navigation__sub-menu--width};
 				box-shadow: -1px 1px 2px $color--shadow;
 			}	
 		}	

diff --git a/assets/scss/components/navigation/_menu-toggles.scss b/assets/scss/components/navigation/_menu-toggles.scss
@@ -2,45 +2,51 @@
 
 
 
-.menu-toggle,
-.sub-menu-toggle {
+button.menu-toggle,
+button.sub-menu-toggle {
 	display: block;
 	margin: 0 auto;
 	border-width: 0;
 	overflow: hidden;
 	text-align: center;
 	visibility: visible;
 	@include media($navigation__breakpoint) {display: none; visibility: hidden;}
-
-	&:focus, &:hover {
-		border-width: 0;
-	}
 }
 
-.menu-toggle {
+button.menu-toggle {
+	color: $color--text-dark;
+	background: transparent;
 	font-size: 20px;
 	line-height: 20px;
 	padding: 15px 20px;
 	z-index: 1000;
-	&.activated::before {content: "\f335";}
+	&::before {
+		margin-right: 5px;
+		position: relative;
+		text-rendering: auto;
+		top: 1px;
+	}
+
+	&.activated {
+		color: $color--text-dark;
+		background: transparent;
+
+		&::before {content: "\f335";}
+	}
 }
 
-.sub-menu-toggle {
+button.sub-menu-toggle {
+	color: $color--text-dark;
+	background: transparent;
 	padding: 15px;
 	z-index: 100;
+	border-radius: 0;
 	&::before {text-rendering: auto; transform: rotate(0); transition: transform 0.25s ease-in-out;}
-	&.activated::before {transform: rotate(180deg);}
-}
 
+	&.activated {
+		color: $color--text-dark;
+		background: transparent;
 
-
-
-
-
-
-.site-header .menu-toggle::before {
-	margin-right: 5px;
-	position: relative;
-	text-rendering: auto;
-	top: 1px;
-}
+		&::before {transform: rotate(180deg);}
+	}
+}
diff --git a/assets/scss/components/navigation/_primary.scss b/assets/scss/components/navigation/_primary.scss
@@ -1,79 +1,70 @@
 // ========== Primary Navigation ========== //
 
 .nav-primary {
-	background: $navigation__nav-primary--mobile-background;
-	font-size: $navigation__nav-primary--mobile-font-size;
-	font-weight: $navigation__nav-primary--mobile-font-weight;
-	@include media($navigation__breakpoint) {
-		color: $navigation__nav-primary--desktop-color;
-		background: $navigation__nav-primary--desktop-background;
-		font-size: $navigation__nav-primary--desktop-font-size;
-		font-weight: $navigation__nav-primary--desktop-font-weight;
-	}
-
-	.genesis-nav-menu {
-		justify-content: $navigation__nav-primary--justify-content;
-		max-width: $navigation__nav-primary--max-width;
-	}
-
-	.menu-item a {
-		color: $navigation__nav-primary--mobile-color;
-		padding: $navigation__nav-primary-menu-item--mobile-padding;
-		@include media($navigation__breakpoint) {
-			color: $navigation__nav-primary--desktop-color;
-			padding: $navigation__nav-primary-menu-item--desktop-padding;
+	background: white;
+	@include media($navigation__breakpoint) {}
+
+
+
+	// ========== Top Level Menu ========== //
+
+		.genesis-nav-menu {
+			justify-content: center;
+			max-width: 1280px;
 		}
 
-		&:focus,
-		&:hover,
-		.current-menu-item > a 
-		.sub-menu .current-menu-item > a:focus,
-		.sub-menu .current-menu-item > a:hover {
-			color: $navigation__nav-primary-menu-item--mobile-color-hover;
-			background: $navigation__nav-primary-menu-item--mobile-background-hover;
-			@include media($navigation__breakpoint) {
-				color: $navigation__nav-primary-menu-item--desktop-color-hover;
-				background: $navigation__nav-primary-menu-item--desktop-background-hover;
+		// Menu Items.
+		.genesis-nav-menu > .menu-item {
+
+			& > a {
+				color: $color--text-dark;
+				font-size: 18px;
+				font-weight: bold;
+				padding: 15px;
+				@include media($navigation__breakpoint) {}
 			}
 		}
-	}
 
-	.sub-menu {
-		background: $navigation__nav-primary-sub-menu--mobile-background;
-		width: $navigation__nav-primary-sub-menu--width;
-		@include media($navigation__breakpoint) {
-			background: $navigation__nav-primary-sub-menu--desktop-background;
+
+
+	// ========== Sub Level Menu ========== //
+
+		.sub-menu {
+			background: white;
+			@include media($navigation__breakpoint) {}
 		}
-		a {
-			color: $navigation__nav-primary-sub-menu-item--mobile-color;
-			font-size: $navigation__nav-primary-sub-menu--mobile-font-size;
-			font-weight: $navigation__nav-primary-sub-menu--mobile-font-weight;
-			@include media($navigation__breakpoint) {
-				color: $navigation__nav-primary-sub-menu-item--desktop-color;
-				font-size: $navigation__nav-primary-sub-menu--desktop-font-size;
-				font-weight: $navigation__nav-primary-sub-menu--desktop-font-weight;
-			}
-			&:hover, &:focus {
-				color: $navigation__nav-primary-sub-menu-item--mobile-color-hover;
-				@include media($navigation__breakpoint) {
-					color: $navigation__nav-primary-sub-menu-item--desktop-color-hover;
-					background: $navigation__nav-primary-sub-menu-item--desktop-background-hover;
-				}
+
+		// Menu Items.
+		.sub-menu > .menu-item {
+
+			& > a {
+				color: $color--text-dark;
+				font-size: 16px;
+				font-weight: normal;
+				padding: 15px;
+				@include media($navigation__breakpoint) {}
 			}
 		}
-	}
-
-	.sub-menu-toggle {
-		color: $navigation__nav-primary--mobile-color;
-		background: $navigation__nav-primary--mobile-background;
-		.sub-menu .menu-item-has-children & {
-			color: $navigation__nav-primary-sub-menu-item--mobile-color;
-			background: $navigation__nav-primary-sub-menu--mobile-background;
+
+
+
+	// ========== Menu Item Effects ========== //
+
+		// Currently viewing.
+		.genesis-nav-menu .current-menu-item > a,
+		.sub-menu .current-menu-item > a {
+
+			&:hover,
+			&:focus {}
+		}
+
+		// Hover and focus. (Must use mixin to properly apply styles. This allows for the sfHover styles to only be applied on desktop screens.)
+		@mixin menu-item-hover-effects {
+			color: $color--link-dark-hover;
+			background: $color--quaternary;
 		}
-	}
-}
 
-#genesis-mobile-nav-primary.menu-toggle {
-	color: $navigation__nav-primary--mobile-color;
-	background: $navigation__nav-primary--mobile-background;
+		.menu-item a:hover,
+		.menu-item a:focus {@include menu-item-hover-effects;}
+		@include media($navigation__breakpoint) {.menu-item.sfHover > a {@include menu-item-hover-effects;}}
 }
diff --git a/assets/scss/utilities/variables/_index.scss b/assets/scss/utilities/variables/_index.scss
@@ -4,4 +4,3 @@
 @import 'colors';
 @import 'layout';
 @import 'breakpoints';
-@import 'navigation';
diff --git a/assets/scss/utilities/variables/_navigation.scss b/assets/scss/utilities/variables/_navigation.scss
diff --git a/style.css b/style.css
@@ -7,7 +7,7 @@
 
     Author: Dan Brubaker
     Author URI: https://brubakerservices.org
-    Version: 2.1.1
+    Version: 2.2.0
 
     Template: genesis