diff --git a/src/layouts/partials/Header.astro b/src/layouts/partials/Header.astro
index 2c022c6..ebb33e4 100755
--- a/src/layouts/partials/Header.astro
+++ b/src/layouts/partials/Header.astro
@@ -32,22 +32,18 @@ const { pathname } = Astro.url;
     <input id="nav-toggle" type="checkbox" class="hidden" />
     <label
       for="nav-toggle"
-      class="order-3 cursor-pointer text-dark dark:text-white lg:order-1"
+      class="order-3 cursor-pointer flex items-center lg:hidden text-dark dark:text-white lg:order-1"
     >
-      <span id="show-button" class="flex items-center lg:order-1 lg:hidden">
-        <svg class="h-6 fill-current" viewBox="0 0 20 20">
-          <title>Menu Open</title>
-          <path d="M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z"></path>
-        </svg>
-      </span>
-      <span id="hide-button" class="hidden items-center lg:order-1">
-        <svg class="h-6 fill-current" viewBox="0 0 20 20">
-          <title>Menu Close</title>
-          <polygon
-            points="11 9 22 9 22 11 11 11 11 22 9 22 9 11 -2 11 -2 9 9 9 9 -2 11 -2"
-            transform="rotate(45 10 10)"></polygon>
-        </svg>
-      </span>
+      <svg id="show-button" class="h-6 fill-current block" viewBox="0 0 20 20">
+        <title>Menu Open</title>
+        <path d="M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z"></path>
+      </svg>
+      <svg id="hide-button" class="h-6 fill-current hidden" viewBox="0 0 20 20">
+        <title>Menu Close</title>
+        <polygon
+          points="11 9 22 9 22 11 11 11 11 22 9 22 9 11 -2 11 -2 9 9 9 9 -2 11 -2"
+          transform="rotate(45 10 10)"></polygon>
+      </svg>
     </label>
     <!-- /navbar toggler -->
     <ul
diff --git a/src/styles/navigation.scss b/src/styles/navigation.scss
index 8677153..77a6455 100755
--- a/src/styles/navigation.scss
+++ b/src/styles/navigation.scss
@@ -1,14 +1,14 @@
 // navbar toggler
-input#nav-toggle:checked ~ label#show-button {
+input#nav-toggle:checked + label #show-button {
   @apply hidden;
 }
 
-input#nav-toggle:checked ~ label#hide-button {
-  @apply flex lg:hidden;
+input#nav-toggle:checked + label #hide-button {
+  @apply block;
 }
 
 input#nav-toggle:checked ~ #nav-menu {
-  @apply block lg:flex;
+  @apply block;
 }
 
 .header {