Move nav visibility classes from php to scss

assets/scss/foundation.scss

@@ -21,7 +21,7 @@
 @import 'font-awesome';
 @import 'motion-ui';
 
-// Foundation global styles 
+// Foundation global styles
 @include foundation-global-styles;
 
 // Individual foundation components
@@ -70,15 +70,14 @@
 */
 
 // Modules
-@import "modules/topbar";
+@import "modules/navigation";
 @import "modules/footer";
 @import "modules/sidebar";
 
 // Components
 @import "components/buttons";
 @import "components/featured-image";
 @import "components/dividers";
-@import "components/off-canvas";
 
 // Templates
 @import "templates/front";

assets/scss/modules/_topbar.scss → assets/scss/modules/_navigation.scss

@@ -1,3 +1,29 @@
+/* Navigation breakpoints */
+
+.main-navigation {
+  @include show-for(medium);
+}
+
+.title-bar {
+  @include hide-for(medium);
+}
+
+/* Mobile menu */
+.off-canvas {
+  ul#menu-main-menu {
+    height: 100vh;
+    padding: 1rem;
+  }
+}
+
+.title-bar-title {
+  a {
+    font-size: 1rem;
+    color: #B9B9B9;
+  }
+}
+
+/* Tablet and desktop menu */
 .top-bar {
 
   .menu .home a {
@@ -19,44 +45,19 @@
     }
   }
 
-  .menu>li:not(.menu-text)>a {
-    padding: 1rem;
-  }
-
-  .menu li:not(:last-child) {
-    @include breakpoint(medium) {
-      border-right: 1px solid #4e4e4e;
-    }
-  }
+  .menu>li:not(.menu-text)>a { padding: 1rem; }
+  .menu li:not(:last-child) { border-right: 1px solid #4e4e4e; }
 
   .dropdown.menu .submenu {
     background-color: #121212;
     color: #e6e6e6;
     border: 0;
   }
 
-  .dropdown.menu .has-submenu.is-down-arrow a {
-    padding-right: 1rem;
-  }
-
-  .dropdown.menu .has-submenu.is-down-arrow>a::after {
-    border: 0;
-  }
-
-
+  .dropdown.menu .has-submenu.is-down-arrow a { padding-right: 1rem; }
+  .dropdown.menu .has-submenu.is-down-arrow>a::after { border: 0; }
 }
 
 .vertical &.menu {
   padding: 1rem;
 }
-
-.title-bar {
-  @include breakpoint(medium) {
-    display: none;
-  }
-
-  .title a {
-    font-size: 1rem;
-    color: #B9B9B9;
-  }
-}

header.php

@@ -42,7 +42,7 @@
 		</div>
 
 		<nav id="site-navigation" class="main-navigation top-bar" role="navigation">
-			<div class="top-bar-left show-for-medium">
+			<div class="top-bar-left">
 				<ul class="menu">
 					<li class="home"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></li>
 				</ul>

library/navigation.php

@@ -24,7 +24,7 @@ function foundationpress_top_bar_r() {
 		wp_nav_menu( array(
 			'container'      => false,
 			'menu_class'     => 'dropdown menu',
-			'items_wrap'     => '<ul id="%1$s" class="%2$s show-for-medium" data-dropdown-menu>%3$s</ul>',
+			'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,
@@ -44,7 +44,7 @@ function foundationpress_mobile_nav() {
 			'menu'           => __( 'mobile-nav', 'foundationpress' ),
 			'menu_class'     => 'vertical menu',
 			'theme_location' => 'mobile-nav',
-			'items_wrap'     => '<ul id="%1$s" class="%2$s show-for-small-only" data-accordion-menu>%3$s</ul>',
+			'items_wrap'     => '<ul id="%1$s" class="%2$s" data-accordion-menu>%3$s</ul>',
 			'fallback_cb'    => false,
 			'walker'         => new Foundationpress_Mobile_Walker(),
 		));