Improve nav scss structure to more simpler and straightforward, fix broken dropdowns, site-header simplifying, documentation

Author: Roni Laukkarinen

css/global.css

@@ -5,7 +5,7 @@
  * @package air
  */
 
-define( 'AIR_VERSION', '2.4.7' );
+define( 'AIR_VERSION', '2.4.8' );
 
 /**
  * Define SendGrid credentials

functions.php

@@ -1,6 +1,6 @@
 {
   "name": "air",
-  "version": "2.4.7",
+  "version": "2.4.8",
   "description": "A minimalist WordPress starter theme.",
   "author": "Digitoimisto Dude Oy ([email protected])",
   "devDependencies": {

package.json

@@ -56,5 +56,5 @@ $container-desktop: 1200px;
 $container-ipad: 770px;
 $container-ipad-landscape: 1024px;
 
-// Where navigation transforms into responsive
-$responsivenav: 872px;
+// Where navigation transforms into responsive - scale your window width down to test
+$responsivenav: 780px;

sass/base/_config.scss

@@ -11,10 +11,14 @@
   left: 0;
   width: 100%;
   z-index: 1;
-  padding-top: 20px;
+
+  @media(min-width: $responsivenav) {
+    padding-top: 20px;
+  }
 
   .container {
     padding: 0;
+    overflow: visible;
   }
 
   .site-branding {
@@ -25,6 +29,22 @@
       overflow: hidden;
       margin: 0;
 
+      // The point where logo touches the left side
+      @media(max-width: $grid-base-size+20) {
+        margin-left: 10px;
+        margin-top: 0;
+        margin-bottom: 0;
+        margin-right: 0;
+      }
+
+      // The point where navigation turns into mobile nav
+      @media(max-width: $responsivenav) {
+        margin-left: 10px;
+        margin-top: 10px;
+        margin-bottom: 0;
+        margin-right: 0;
+      }
+
       a {
         svg {
           fill: #fff;
@@ -36,7 +56,7 @@
           svg {
             fill: $color-fog;
           }
-        }
+        }        
       }
     }
   }

sass/layout/_site-header.scss

@@ -6,7 +6,13 @@
 // -----------------------------------------------------------
 
 // Desktop styles for navigation
-#nav {
+nav {
+  @media (min-width: $responsivenav) {
+    // Set based on logo height, for example air logo is about 62px, menu links height are 12px, so paddings are (60/2)-12:
+    padding-top: 17px;
+    padding-bottom: 17px;
+  }
+
   ul {
     li {
       // Desktop navigation start
@@ -23,7 +29,8 @@
         &.focus > ul,
         .focus > ul,
         ul.toggled {
-          top: 55px;
+          // Calculate this with the font size
+          top: 32px;
           left: 38%;
           margin-left: -75px;
           opacity: 1;
@@ -207,8 +214,8 @@
   @media (min-width: $responsivenav) {
     .dropdown {
       ul {
-        max-height: 0;
-        overflow: hidden;
+        max-height: 9999px;
+        overflow: visible;
 
         li {
           width: 100%;

sass/navigation/_nav-desktop.scss

@@ -18,10 +18,6 @@ nav {
   overflow: visible;
   float: right;
 
-  // Set based on logo height, for example air logo is about 62px, menu links height are 12px, so paddings are (60/2)-12:
-  padding-top: 17px;
-  padding-bottom: 17px;
-
   ul {
     margin-bottom: 0;
     margin-top: 0;

sass/navigation/_nav-layout.scss

@@ -116,8 +116,8 @@
   -webkit-tap-highlight-color: rgba(#000, 0);
   border: 0;
   color: #fff;
-  font-size: 21px;
-  font-weight: bold;
+  font-size: 16px;
+  font-weight: 700;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-touch-callout: none;
@@ -129,6 +129,8 @@
   line-height: 39px;
   padding: 0 .75em;
   background: transparent;
+  appearance: button;
+  cursor: pointer;
 
   span {
     color: #fff;
@@ -152,8 +154,8 @@
   @media (max-width: ($responsivenav)-1px) {
     width: auto;
     float: right;
-    top: 30px;
-    right: 20px;
+    top: 22px;
+    right: 10px;
     position: relative;
   }
 
@@ -169,7 +171,3 @@
   }
 }
 
-button {
-  appearance: button;
-  cursor: pointer;
-}

sass/navigation/_nav-mobile.scss

@@ -4,7 +4,7 @@ Theme URI: https://github.com/digitoimistodude/air
 Author: Digitoimisto Dude Oy
 Author URI: https://www.dude.fi
 Description: A minimalist WordPress starter theme.
-Version: 2.4.7
+Version: 2.4.8
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: air
@@ -19,6 +19,6 @@ Tags:
 * @link https://github.com/Automattic/_s/commits/master
 *
 * @author Roni Laukkarinen (https://github.com/ronilaukkarinen), Timi Wahalahti (https://github.com/timiwahalahti)
-* @version 11.05.2017
+* @version 15.05.2017
 * @since 28.01.2016
 */