diff --git a/assets/scss/navigation.scss b/assets/scss/navigation.scss
index de30321..ba8854f 100755
--- a/assets/scss/navigation.scss
+++ b/assets/scss/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 {
diff --git a/layouts/partials/essentials/header.html b/layouts/partials/essentials/header.html
index f1c3269..17ecdf9 100755
--- a/layouts/partials/essentials/header.html
+++ b/layouts/partials/essentials/header.html
@@ -12,31 +12,24 @@
     <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">
-      <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"
-        for="nav-toggle"
-        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>
+      class="order-3 cursor-pointer flex items-center lg:hidden text-dark dark:text-white lg:order-1">
+      <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 -->
 
     <!-- main navbar -->
     <ul
       id="nav-menu"
-      class="navbar-nav order-3 hidden w-full pb-6 lg:order-1 lg:flex lg:w-auto lg:space-x-2 lg:pb-0 xl:space-x-8">
+      class="navbar-nav order-3 hidden lg:flex w-full pb-6 lg:order-1 lg:w-auto lg:space-x-2 lg:pb-0 xl:space-x-8">
       {{ $currentPage := . }}
       {{ range site.Menus.main }}
         {{ $menuURL := .URL | absLangURL }}