styled menus for small screens agnostic to menu internal name

adminstyles.css

@@ -1326,7 +1326,7 @@ Add your custom styles in this file so it is easier to update the theme.
 		display: block;
 	}
 
-	.edit-post-visual-editor__content-area .main-navigation.toggled .menu-primary-menu-container {
+	.edit-post-visual-editor__content-area .main-navigation.toggled .main-navigation-content {
 		display: inline-block;
 		position: absolute;
 		top: 5rem;
@@ -1362,15 +1362,15 @@ Add your custom styles in this file so it is easier to update the theme.
 		padding: 0;
 	}
 
-	.edit-post-visual-editor__content-area .menu-primary-menu-container {
+	.edit-post-visual-editor__content-area .main-navigation-content {
 		text-transform: uppercase;
 	}
 
-	.edit-post-visual-editor__content-area .menu-primary-menu-container li {
+	.edit-post-visual-editor__content-area .main-navigation-content li {
 		padding: 0.5rem 0;
 	}
 
-	.edit-post-visual-editor__content-area .menu-secondary-menu-container {
+	.edit-post-visual-editor__content-area .secondary-navigation-content {
 		padding: 4rem 2rem;
 	}
 }

header.php

@@ -48,6 +48,7 @@
 
 	  	<nav id="site-navigation-main" class="main-navigation">
 				<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false" style="background-image: url('<?php echo esc_url( wp_get_attachment_url( get_theme_mod( 'custom_logo' ) ) ); ?>');" ><?php esc_html_e( 'Menu XarxaProd', 'ofisuport' ); ?></button>
+        <section class="main-navigation-content">
 	  		<?php
 	  		wp_nav_menu(
 	  			array(
@@ -56,6 +57,7 @@
 	  			)
 	  		);
 ?>
+        </section>
 	  	</nav><!--primary #site-navigation -->
 		</div>
 		<div class="secondary">
@@ -66,6 +68,7 @@
         <input id="show-menu-mobile" class="hide-not-mobile toggle" name="toggle" type="radio">
         <div class="toggled-menu">
 					<label for="hide-menu-mobile" class="hide-not-mobile toggle-hide"><span class="hide-content">close</span></label>
+        <section class="secondary-navigation-content">
 					<?php // here content to hide or show ?>
 		  	  <?php
 		  	     wp_nav_menu(
@@ -75,6 +78,7 @@
 		  	     	)
 		  	     );
           ?>
+          </section>
         </div><!--toggled-menu-->
 			</nav><!--secondary #site-navigation -->
 

sass/components/navigation/_navigation.scss

@@ -130,7 +130,7 @@
 		ul {
 			display: block;
 		}
-		.menu-primary-menu-container {
+		.main-navigation-content {
 			display: inline-block;
 			position: absolute;
 			top: 5rem;
@@ -163,13 +163,13 @@
 		margin: 0;
 		padding: 0;
 	}
-	.menu-primary-menu-container {
+	.main-navigation-content {
 		text-transform: uppercase;
 		li {
 			padding: 0.5rem 0; 
 		}
 	}
-	.menu-secondary-menu-container {
+	.secondary-navigation-content {
 		padding: 4rem 2rem;
 	}
 }

style.css

@@ -1201,7 +1201,7 @@ textarea {
 		display: block;
 	}
 
-	.main-navigation.toggled .menu-primary-menu-container {
+	.main-navigation.toggled .main-navigation-content {
 		display: inline-block;
 		position: absolute;
 		top: 5rem;
@@ -1237,15 +1237,15 @@ textarea {
 		padding: 0;
 	}
 
-	.menu-primary-menu-container {
+	.main-navigation-content {
 		text-transform: uppercase;
 	}
 
-	.menu-primary-menu-container li {
+	.main-navigation-content li {
 		padding: 0.5rem 0;
 	}
 
-	.menu-secondary-menu-container {
+	.secondary-navigation-content {
 		padding: 4rem 2rem;
 	}
 }