mobile nav toggle refactored

now toggling the whole top bar instead of a the mobile nav inside the 
top-bar-right according to the foundation-sites docs
https://foundation.zurb.com/sites/docs/top-bar.html

header.php

@@ -32,7 +32,7 @@
 			</div>
 		</div>
 
-		<nav class="site-navigation top-bar" role="navigation">
+		<nav class="site-navigation top-bar" role="navigation" id="<?php foundationpress_mobile_menu_id(); ?>">
 			<div class="top-bar-left">
 				<div class="site-desktop-title top-bar-title">
 					<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>

library/navigation.php

@@ -25,8 +25,8 @@ function foundationpress_top_bar_r() {
 		wp_nav_menu(
 			array(
 				'container'      => false,
-				'menu_class'     => 'dropdown menu',
-				'items_wrap'     => '<ul id="%1$s" class="%2$s desktop-menu" data-dropdown-menu>%3$s</ul>',
+				'menu_class'     => 'dropdown menu desktop-menu',
+				'items_wrap'     => '<ul id="%1$s" class="%2$s" data-dropdown-menu>%3$s</ul>',
 				'theme_location' => 'top-bar-r',
 				'depth'          => 3,
 				'fallback_cb'    => false,

src/assets/scss/modules/_navigation.scss

@@ -3,7 +3,7 @@
 .site-title-bar {
   @include hide-for(medium);
 }
-
+//
 .desktop-menu,
 .site-navigation .top-bar-left {
   @include show-for(medium);
@@ -14,12 +14,6 @@
   font-weight: bold;
 }
 
-// Mobile menu
-.mobile-menu {
-  display: none; // prevents repaint caused by JS hiding menu onload
-}
-
-
 // WP post navigation
 .post-navigation {
   @include clearfix;

template-parts/mobile-top-bar.php

@@ -8,6 +8,6 @@
 
 ?>
 
-<nav class="mobile-menu vertical menu" id="<?php foundationpress_mobile_menu_id(); ?>" role="navigation">
+<nav class="mobile-menu vertical menu" role="navigation">
 	<?php foundationpress_mobile_nav(); ?>
 </nav>