Make main nav more responsive

magento · Dec 19, 2017 · 183d20f · 183d20f
1 parent 5ea3d34
commit 183d20f
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 92 deletions.
diff --git a/css/app.css b/css/app.css
diff --git a/js/_includes/menu.js b/js/_includes/menu.js
@@ -43,7 +43,7 @@ $.fn.mainNavigation = function(settings) {
 			e.stopPropagation();
 			e.preventDefault();
 			var currentItem = $(this);
-			console.log('enter');
+			//console.log('enter');
 			// Center the flyout menu
 			var popup = currentItem.find( settings.popupSelector );
 			if ( popup.find('.nav-section').length ) {
@@ -65,7 +65,7 @@ $.fn.mainNavigation = function(settings) {
 		var handleMenuMouseLeave = function (e) {
 			e.stopPropagation();
 			e.preventDefault();
-			console.log('leave');
+			//console.log('leave');
 			var currentItem = $(this);
 
 			hidePopup( currentItem );
@@ -80,7 +80,7 @@ $.fn.mainNavigation = function(settings) {
 		}
 
 		var handleLastLinkFocusOut = function (e) {
-			console.log( $(this) );
+			//console.log( $(this) );
 			hidePopup ( $(this).closest( settings.popupSelector ) );
 		}
 

diff --git a/scss/partials/_nav-main.scss b/scss/partials/_nav-main.scss
@@ -150,10 +150,10 @@
   padding: 0;
 
   .nav-section-title {
-    color: $brand-color;
+    color: #888;
     text-transform: uppercase;
     letter-spacing: .1em;
-    font-size: 14px;
+    font-size: 12px;
     font-weight: 600;
     padding: 15px 20px 10px 20px;
   }
@@ -221,19 +221,6 @@
   width: 100%;
 }
 
-/* TDD - Alternate menu appearance
-
-.nav-main #subnav-wrap #subnav ul li a {
-  font: 1em 'Open Sans',sans-serif;
-  font-weight: 600;
-  text-transform: none;
-  padding: 11px 15px;
-  outline: 0;
-  background: none repeat scroll 0 0 #31302b;
-} */
-
-
-
 
 body.offcanvas-active {
   overflow: hidden;
@@ -245,7 +232,7 @@ body.offcanvas-active {
     position: fixed;
     transition: all .2s;
     margin: 0;
-    top: 0;
+    top: $header-height;
     right: 0;
     height: auto;
     max-height: 100%;
@@ -257,98 +244,51 @@ body.offcanvas-active {
     overflow: auto;
     display: none;
 
-    .offcanvas-active &.nav-main-mobile {
-      display: block;
-    }
-
-    li {
-      width: 100%;
-      border: none;
-      border-bottom: 1px solid $light-gray-color;
+    .nav-main-item > a {
+      font-size: 18px;
+      padding-left: 10px;
     }
 
-    li a, {
+    .offcanvas-active &.nav-main-mobile {
       display: block;
-      font-size: 16px;
-      padding: 20px $header-height 20px 20px;
-    }
-
-    li a, li a:hover {
-      background: none;
-      border: none;
     }
 
-    ul {
-      padding-top: $header-height;
-    }
-
-    // Second level menu
-    ul ul {
-      visibility: visible;
+    .nav-popup {
+      display: block;
       position: relative;
+      opacity: 1;
+      visibility: visible;
       left: 0;
       top: 0;
-      opacity: 1;
-      width: 100%;
-      max-height: 0;
-      padding: 0;
-      margin: 0;
-      border: none;
-      overflow: hidden;
-      transition: max-height 0.2s;
       box-shadow: none;
+      border: none;
+    }
 
-      li a {
-        font-size: 14px;
-        padding-left: 20px;
-      }
-
+    .nav-section {
+      padding-bottom: 16px;
     }
-    .expanded ul {
-      max-height: 999px;
+
+    .nav-main-separator {
+      height: 1px;
+      border-left: none;
+      border-bottom: 1px solid #ccc;
+      margin-bottom: 16px;
     }
 
-    .children-toggle {
-      position: absolute;
-      display: block;
-      width: $header-height;
-      height: 57px;
-      border: none;
+
+
+    li a, li a:hover {
       background: none;
-      top:0;
-      right: 0;
-      z-index: 1;
-
-      &:after {
-        width: 0;
-        height: 0;
-        margin: 0 auto;
-        position: relative;
-        top: 22px;
-        border-style: solid;
-        border-width: 8px 6px 0 6px;
-        border-color: #333 transparent transparent transparent;
-        display: block;
-        content: '';
-        transition: all .2s;
-      }
+      border: none;
     }
 
-    .expanded .children-toggle:after {
-      transform: rotate(180deg);
+    li a:active {
+      background: #ccc;
     }
 
-
   }
 
-/*
-  .offcanvas-active .site-header,
-  .offcanvas-active #gl-wrapper,
-  .offcanvas-active #footer  {
-      //transform: translate(260px,0);
-  }*/
-
-}
+}// medium-screen
 
 .nav-main-fader {
   background: rgba(0,0,0,0);