styled mobile menu with input and css

header.php

@@ -63,10 +63,10 @@
 		  <nav id="site-navigation-secondary" class="site-navigation secondary-navigation toogle-secondary-navigation">
         <legend class="hide-content">menu</legend>
         <input id="hide-menu-mobile" class="hide-not-mobile toogle" name="toogle" type="radio">
-        <label for="show-menu-mobile" class="toogle-show"><span class="hide-content">open</span></label>
+        <label for="show-menu-mobile" class="hide-not-mobile toogle-show"><span class="hide-content">open</span></label>
         <input id="show-menu-mobile" class="hide-not-mobile toogle" name="toogle" type="radio">
         <div class="toogled-menu">
-					<label for="hide-menu-mobile" class="toogle-hide"><span class="hide-content">close</span></label>
+					<label for="hide-menu-mobile" class="hide-not-mobile toogle-hide"><span class="hide-content">close</span></label>
 					<?php // here content to hide or show ?>
 		  	  <?php
 		  	  wp_nav_menu(

sass/components/navigation/_navigation.scss

@@ -96,6 +96,9 @@
 			text-transform: uppercase;
 		}
 	}
+
+
+	
 	/* begin of menu-hidden */
 	.toogle-secondary-navigation .show-mobile{
 		display:inherit;
@@ -196,6 +199,18 @@
 	}
 	.secondary-navigation {
 	}
+	/* 
+	 * css menu toogler 
+	 * */
+	.toogle-secondary-navigation .show-mobile,
+  .toogle-secondary-navigation .hide-not-mobile{
+    display: none;
+  }
+	.toogled-menu {
+		display: inherit;
+	}
+  /* end css menu toogler 
+	 * */
 }
 
 .comment-navigation,

style.css

@@ -946,6 +946,18 @@ textarea {
 		margin-top: 0.9em;
 		border-bottom: 2px solid #000;
 	}
+	/* 
+	 * css menu toogler 
+	 * */
+	.toogle-secondary-navigation .show-mobile,
+	.toogle-secondary-navigation .hide-not-mobile {
+		display: none;
+	}
+	.toogled-menu {
+		display: inherit;
+	}
+	/* end css menu toogler 
+	 * */
 }
 
 .site-main .comment-navigation, .site-main