From 405e53354bc8bd263bcb6d0ae2154ee11b1b6f8f Mon Sep 17 00:00:00 2001
From: srijitcoder <srijitsm123@gmail.com>
Date: Thu, 12 Dec 2024 14:33:24 +0530
Subject: [PATCH] fix: added nav to top on mobile

---
 .../src/helpers/render-html-string.js         |  7 ++---
 elements/storytelling/src/style.eox.js        | 29 +++++++++----------
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/elements/storytelling/src/helpers/render-html-string.js b/elements/storytelling/src/helpers/render-html-string.js
index 974aba5a5..890a7ea2b 100644
--- a/elements/storytelling/src/helpers/render-html-string.js
+++ b/elements/storytelling/src/helpers/render-html-string.js
@@ -319,11 +319,8 @@ export function parseNavWithAddSection(
     const navHtml = `
     <div class="navigation">
       <div class="container nav-container">
-        <button class="hamburger-menu" aria-label="Toggle navigation">
-          <span></span>
-          <span></span>
-          <span></span>
-        </button>
+        <span class="hamburger-menu" aria-label="Toggle navigation">
+        </span>
         <div class="nav-overlay"></div>
         <ul class="nav-list">
           ${nav
diff --git a/elements/storytelling/src/style.eox.js b/elements/storytelling/src/style.eox.js
index 9a061c0b9..684698f8b 100644
--- a/elements/storytelling/src/style.eox.js
+++ b/elements/storytelling/src/style.eox.js
@@ -78,22 +78,12 @@ ${slider}
   }
   .hamburger-menu {
     display: none;
-    flex-direction: column;
-    justify-content: space-between;
-    width: 30px;
-    height: 25px;
-    background: none;
-    border: none;
     cursor: pointer;
-    padding: 0;
-    margin: 15px;
-    box-shadow: unset !important;
-  }
-  .hamburger-menu span {
-    width: 100%;
-    height: 3px;
-    background-color: #333;
-    transition: all 0.3s ease;
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTUsOS41TDcuNSwxNEgyLjVMNSw5LjVNMyw0SDdWOEgzVjRNNSwyMEEyLDIgMCAwLDAgNywxOEEyLDIgMCAwLDAgNSwxNkEyLDIgMCAwLDAgMywxOEEyLDIgMCAwLDAgNSwyME05LDVWN0gyMVY1SDlNOSwxOUgyMVYxN0g5VjE5TTksMTNIMjFWMTFIOVYxM1oiIC8+PC9zdmc+");
+    background-repeat: no-repeat;
+    background-size: contain;
+    width: 30px;
+    height: 30px;
   }
   .nav-list {
     list-style: none;
@@ -104,6 +94,15 @@ ${slider}
     display: none;
   }
   @media (max-width: 768px) {
+    .navigation {
+      padding: 0px;
+      height: 50px;
+    }
+    .navigation .container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
     .hamburger-menu {
       display: flex;
     }