From bfce3ab76b6ee7c04388c87c396c53d427ca9bb6 Mon Sep 17 00:00:00 2001
From: Lisa <lisa@pogodan.com>
Date: Wed, 4 Oct 2023 22:26:29 +0100
Subject: [PATCH] fix broken navbar-burger

---
 src/components/Navbar.astro           |  8 ++++----
 src/components/NavbarClone.astro      |  8 ++++----
 src/styles/components/_hamburger.scss | 15 +++------------
 3 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 6a6d9cc..9698083 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -17,19 +17,19 @@
       <!-- Responsive toggle -->
       <div class="navbar-burger" @click="openMobileMenu()">
         <div class="menu-toggle">
-          <span
+          <div
             class="icon-box-toggle"
             :class="{
                       'active': mobileOpen,
                       '': !mobileOpen
                   }"
           >
-            <span class="rotate">
+            <div class="rotate">
               <i class="icon-line-top"></i>
               <i class="icon-line-center"></i>
               <i class="icon-line-bottom"></i>
-            </span>
-          </span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/NavbarClone.astro b/src/components/NavbarClone.astro
index 207b55e..860dbef 100644
--- a/src/components/NavbarClone.astro
+++ b/src/components/NavbarClone.astro
@@ -19,19 +19,19 @@
       <!-- Responsive toggle -->
       <div class="navbar-burger" @click="openMobileMenu()">
         <div class="menu-toggle">
-          <span
+          <div
             class="icon-box-toggle"
             :class="{
                       'active': mobileOpen,
                       '': !mobileOpen
                   }"
           >
-            <span class="rotate">
+            <div class="rotate">
               <i class="icon-line-top"></i>
               <i class="icon-line-center"></i>
               <i class="icon-line-bottom"></i>
-            </span>
-          </span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/styles/components/_hamburger.scss b/src/styles/components/_hamburger.scss
index f53e221..80705a2 100644
--- a/src/styles/components/_hamburger.scss
+++ b/src/styles/components/_hamburger.scss
@@ -29,23 +29,14 @@ Hamburger menu icon
         width: 30px;
         height: 30px;
 
-        &.active > span.rotate {
-            /*transform*/
-            -webkit-transform: rotate(90deg);
-            -moz-transform: translate(0px, 0px) rotate(90deg);
-            -ms-transform: translate(0px, 0px) rotate(90deg);
-            -o-transform: translate(0px, 0px) rotate(90deg);
-            transform: translate(0px, 0px) rotate(90deg);
-        }
-
-        &.active > span > i.icon-line-center {
+        &.active > div > i.icon-line-center {
             visibility: hidden;
             width: 1px;
             height: 3px;
             left: 70%;
         }
 
-        &.active > span > i.icon-line-bottom {
+        &.active > div > i.icon-line-bottom {
             margin: -2px 0 0 -10px;
             left: 50%;
             top: 12px;
@@ -58,7 +49,7 @@ Hamburger menu icon
             transform: translate(0px, 0px) rotate(135deg);
         }
 
-        &.active > span > i.icon-line-top {
+        &.active > div > i.icon-line-top {
             margin: -2px 0 0 -10px;
             left: 50%;
             top: 12px;