Fix topbar issues

assets/scss/modules/_navigation.scss

@@ -1,14 +1,15 @@
 /* Navigation breakpoints */
 
-.main-navigation {
+.desktop-menu, .top-bar-left {
   @include show-for(medium);
 }
 
-.title-bar {
+#mobile-menu, .title-bar {
   @include hide-for(medium);
 }
 
 /* Mobile menu */
+
 .off-canvas {
   ul#menu-main-menu {
     height: 100vh;
@@ -39,6 +40,7 @@
     padding-bottom: 0;
     font-weight: bold;
     font-size: 0.8rem;
+    line-height: 1;
 
     &:hover:not(.button) {
       background-color: #2a2a2a;

header.php

@@ -35,7 +35,7 @@
 
 	<header id="masthead" class="site-header" role="banner">
 		<div class="title-bar" data-responsive-toggle="site-navigation">
-			<button class="menu-icon" type="button" data-toggle="offCanvas"></button>
+			<button class="menu-icon" type="button" data-toggle="mobile-menu"></button>
 			<div class="title-bar-title">
 				<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
 			</div>

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" data-dropdown-menu>%3$s</ul>',
+			'items_wrap'     => '<ul id="%1$s" class="%2$s desktop-menu" data-dropdown-menu>%3$s</ul>',
 			'theme_location' => 'top-bar-r',
 			'depth'          => 3,
 			'fallback_cb'    => false,

parts/mobile-off-canvas.php

@@ -9,7 +9,7 @@
 
 ?>
 
-<nav class="off-canvas position-left" id="offCanvas" data-off-canvas data-position="left" role="navigation">
+<nav class="off-canvas position-left" id="mobile-menu" data-off-canvas data-position="left" role="navigation">
   <?php foundationpress_mobile_nav(); ?>
 </nav>
 

parts/mobile-top-bar.php

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