navigation js breaks apart navigation logic in small screens

js/navigation.js

@@ -64,10 +64,18 @@
 		link.addEventListener( 'blur', toggleFocus, true );
 	}
 
+	//
+	// DO NOT ACTIVATE IT  
+	//   if so it will not focus thus work when link has sub elements
+	//
+	//
 	// Toggle focus each time a menu link with children receive a touch event.
-	for ( const link of linksWithChildren ) {
-		link.addEventListener( 'touchstart', toggleFocus, false );
-	}
+	//
+	//for ( const link of linksWithChildren ) {
+	//	link.addEventListener( 'touchstart', toggleFocus, false );
+	//}
+	//
+
 
 	/**
 	 * Sets or removes .focus class on an element.

sass/components/navigation/_navigation.scss

@@ -17,7 +17,7 @@
 			list-style: none;
 			margin: 0;
 			padding-left: 0;
-      .sub-menu {
+      ul.sub-menu {
         padding-top: 0.5rem;
         padding-left: 1rem;
       }
@@ -26,32 +26,19 @@
 			position: relative;
 		}
 		a {
+			display: flex;
+			align-items: center;
+			min-height: 100%;
 			text-decoration: none;
 			font-size: 1rem;
 		}
 	}
-
 	.main-navigation {
 	  &.toggled {
 	  	ul {
 	  		display: block;
-				margin:0;
-				padding:0;
-				.sub-menu {
-					padding: 0.5em;
-					a {
-					}
-				}
-
 	  	}
-			li {
-				padding: 0;
-			}
-			a {
-				margin:0;
-			  padding: 0.5em;
-			  display: block;
-			}
+		
 	  	.main-navigation-content {
 	  		display: inline-block;
 	  		position: absolute;
@@ -151,11 +138,11 @@
 	}
 	.main-navigation-content {
 		li {
-			//padding: 0.5rem 0; 
+			padding: 0.5rem 0; 
 		}
 	}
 	.secondary-navigation-content {
-		//padding: 4rem 2rem;
+		padding: 4rem 2rem;
 	}
 }
 @media screen and (min-width: 48em) {