Responsive menu streamlining

Author: xsynaptic

src/header.php

@@ -17,8 +17,8 @@
           <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
           <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
         </div>
+        <button id="responsive-menu-toggle"><?php _e( 'Menu', 'voidx' ); ?></button>
         <nav id="site-navigation" class="site-navigation">
-          <button id="responsive-menu-toggle"><?php _e( 'Menu', 'voidx' ); ?></button>
           <div id="responsive-menu"><?php wp_nav_menu( array( 'theme_location' => 'header', 'menu_id' => 'menu-header', 'menu_class' => 'menu-inline' ) ); ?></div>
         </nav>
       </header>

src/js/responsive-menu.js

@@ -1,4 +1,4 @@
-// ==== RESPONSIVE NAVIGATION MENU ==== //
+// ==== RESPONSIVE MENU ==== //
 
 // Menu toggle script adapted from _s: https://github.com/Automattic/_s
 ;(function() {
@@ -19,16 +19,12 @@
 
   // Toggle navigation; add or remove a class to both the button and the nav element itself
   button.onclick = function() {
-    if (button.className.indexOf( 'toggled' ) !== -1) {
-      button.className = button.className.replace(' toggled', '');
+    if (button.className.indexOf( 'active' ) !== -1) {
+      nav.style.display = 'none';
+      button.className = button.className.replace(' active', '');
     } else {
-      button.className += ' toggled';
-    }
-
-    if (menu.className.indexOf( 'toggled' ) !== -1) {
-      menu.className = menu.className.replace(' toggled', '');
-    } else {
-      menu.className += ' toggled';
+      nav.style.display = 'block';
+      button.className += ' active';
     }
   };
 } )();

src/scss/_layout.scss

@@ -71,6 +71,15 @@
     @extend %spacer-below-2;
   }
 }
+.site-navigation {
+  display: none;
+  @include media-above($break-medium) {
+    display: block !important; // Handles an edge case where user resizes after menu is hidden on smaller screens
+  }
+  &.active {
+    display: block;
+  }
+}
 .alignright {
   float: right;
 }

src/scss/_menus.scss

@@ -20,23 +20,9 @@
   }
 }
 
-// Responsive header menu; this container ID handles the fact that `wp_nav_menu()` defaults back to `wp_page_menu()` when no menu is active
-#responsive-menu {
-  display: none;
-  @include media-above($break-medium) {
-    display: block;
-  }
-  &.toggled {
-    display: block;
-  }
-}
-
 // Menu toggle for mobile phones and small screens
 #responsive-menu-toggle {
   @include media-above($break-medium) {
     display: none;
   }
-  &.toggled {
-    display: none;
-  }
 }