From c0cf7f01ad9384f8e9cf01f46f4cc8701637690e Mon Sep 17 00:00:00 2001
From: yusuf0279 <yusuf.sabuwala@openxpert.cloud>
Date: Sat, 8 Aug 2026 08:25:03 +0000
Subject: [PATCH] fix mobile header: plain Promist image + working hamburger
 drawer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Convert Promist CTA from button (.promist-btn + arrow) to a plain
  image link (.promist-link) — no button chrome, no hover transform
- Fix dead hamburger: React onClick handlers (idempotent add/remove of
  th-body-visible) on hamburger, close X, and overlay, so the drawer
  opens/closes regardless of the theme jQuery binding state
- Vertically center hamburger + Profen + Promist in one row on mobile
- Hide .menu-wrap SVG mask wings on mobile (they overlapped Promist)
- Show Promist column on mobile (d-block d-lg-none d-xl-block)
- All changes scoped to @media (max-width:767px) or the Promist link
  base styles; desktop (>=768px) untouched
---
 src/components/sections/Header.jsx | 30 ++++++++-----
 src/css/dynamic.css                | 71 ++++++++++++------------------
 2 files changed, 47 insertions(+), 54 deletions(-)

diff --git a/src/components/sections/Header.jsx b/src/components/sections/Header.jsx
index 3f5bd6f..b8eb79b 100644
--- a/src/components/sections/Header.jsx
+++ b/src/components/sections/Header.jsx
@@ -34,6 +34,15 @@ export default function Header() {
     return pathname.startsWith(path)
   }
 
+  // Drawer control — idempotent add/remove so it never double-toggles
+  // even if the theme's jQuery thmobilemenu binding also fires.
+  const openMobileMenu = () => {
+    document.querySelector('.th-menu-wrapper')?.classList.add('th-body-visible')
+  }
+  const closeMobileMenu = () => {
+    document.querySelector('.th-menu-wrapper')?.classList.remove('th-body-visible')
+  }
+
   return (
     <header ref={ref}>
       <style id="elementor-post-945" dangerouslySetInnerHTML={{ __html: ELEMENTOR_945_CSS }}></style>
@@ -43,9 +52,9 @@ export default function Header() {
             <div className="elementor-widget-container">
 
               {/* Mobile Menu */}
-              <div className="th-menu-wrapper">
-                <div className="th-menu-area text-center">
-                  <button className="th-menu-toggle"><i className="fas fa-times"></i></button>
+              <div className="th-menu-wrapper" onClick={closeMobileMenu}>
+                <div className="th-menu-area text-center" onClick={(e) => e.stopPropagation()}>
+                  <button className="th-menu-toggle" onClick={closeMobileMenu}><i className="fas fa-times"></i></button>
                   <div className="mobile-logo">
                     <a href="/"><img alt="logo" src="/assets/images/logo_pe-new-bk-70.png" /></a>
                   </div>
@@ -120,7 +129,7 @@ export default function Header() {
 
                 {/* Sticky Nav */}
                 <div className="sticky-wrapper">
-                  <div className="container">
+                  <div className="container px-3 px-sm-4 px-lg-0">
                     <div className="menu-area">
                       <div className="row align-items-start justify-content-between">
                         <div className="col-auto d-none d-lg-block">
@@ -131,7 +140,8 @@ export default function Header() {
                         </div>
                         <div className="col">
                           <div className="menu-wrap">
-                            <div className="header-logo d-block d-lg-none">
+                            <button className="th-menu-toggle d-block d-lg-none ms-0" type="button" onClick={openMobileMenu}><i className="far fa-bars"></i></button>
+                            <div className="header-logo d-block d-lg-none me-auto">
                               <a href="/"><img alt="logo_pe new bk 70" src="/assets/images/logo_pe-new-bk-70.png" /></a>
                             </div>
                             <nav className="main-menu d-none d-lg-inline-block">
@@ -164,16 +174,12 @@ export default function Header() {
                                 })}
                               </ul>
                             </nav>
-                            <button className="th-menu-toggle d-block d-lg-none" type="button"><i className="far fa-bars"></i></button>
                           </div>
                         </div>
-                        <div className="col-auto d-none d-xl-block">
+                        <div className="col-auto d-block d-lg-none d-xl-block">
                           <div className="header-button">
-                            <a href="https://promist.openexplorer.xyz" target="_blank" rel="noopener noreferrer" className="promist-btn">
-                              <span className="promist-logo">
-                                <img src="/assets/images/Promist-Logo-1.png" alt="Promist" />
-                              </span>
-                              <i className="far fa-arrow-right"></i>
+                            <a href="https://promist.openexplorer.xyz" target="_blank" rel="noopener noreferrer" className="promist-link">
+                              <img src="/assets/images/Promist-Logo-1.png" alt="Promist" />
                             </a>
                           </div>
                         </div>
diff --git a/src/css/dynamic.css b/src/css/dynamic.css
index 37c91fd..8690ea5 100644
--- a/src/css/dynamic.css
+++ b/src/css/dynamic.css
@@ -67,51 +67,18 @@ img { max-width: 100%; height: auto; }
   color: #fff;
 }
 
-/* ── NAVY CTA BUTTON (header) ── */
-.promist-btn {
-  justify-content: center;
+/* ── PROMIST LINK (header): plain image, no button chrome ── */
+.promist-link {
   display: inline-flex;
   align-items: center;
-  gap: 0; /* override base gap so logo is perfectly centered at rest */
-  background-color: #ffffff;
-  color: #101840;
-  border: 2px solid transparent;
-  border-radius: 30px;
-  padding: 15px 15px;
-  position: relative;
-  font-family: var(--title-font);
-  font-size: 17px;
-  font-weight: 600;
-  line-height: 1.2;
   text-decoration: none;
-  white-space: nowrap;
-  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
+  line-height: 0;
 }
-.promist-btn .promist-logo {
-  display: inline-flex;
-  align-items: center;
-  transition: margin 0.3s;
-}
-.promist-btn .promist-logo img {
-  height: 52px;
+.promist-link img {
+  height: 30px;
   width: auto;
   display: block;
 }
-.promist-btn .fa-arrow-right {
-  max-width: 0;
-  margin-left: 0;
-  opacity: 0;
-  overflow: hidden;
-  transform: translateX(-6px);
-  transition: max-width 0.35s ease, margin-left 0.35s ease, opacity 0.3s ease, transform 0.3s ease;
-}
-.promist-btn:hover .fa-arrow-right {
-  max-width: 22px;
-  margin-left: 10px;
-  opacity: 1;
-  transform: translateX(0);
-}
-.promist-btn:hover { border-color: #d1d5db; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(16, 24, 64, 0.28); }
 
 /* Tab menu spacing */
 .tab-menu2 {
@@ -1007,18 +974,38 @@ img { max-width: 100%; height: auto; }
 .sticky-wrapper.sticky .logo-sticky { display: block; }
 
 /* Lighter border on the nav CTA when navbar is scrolled/sticky */
-.header-layout5 .sticky-wrapper.sticky .promist-btn {
-  border-color: #d1d5db;
-}
 
 /* ── HEADER BUTTON: bigger Promist logo in navbar ── */
-.header-layout5 .header-button .promist-btn .promist-logo img {
+.header-layout5 .header-button .promist-link img {
   height: 30px !important;
   width: auto !important;
   display: block !important;
   margin: 0 auto !important;
 }
 
+/* ── MOBILE (<=767px): shrink both logos so hamburger + Profen + Promist fit one row ── */
+@media (max-width: 767px) {
+  /* Vertically center hamburger, Profen logo and Promist in the same row */
+  .header-layout5 .row.align-items-start {
+    align-items: center !important;
+  }
+  /* Hide the SVG mask wings that overlap the Promist logo on small screens */
+  .header-layout5 .menu-wrap:before,
+  .header-layout5 .menu-wrap:after {
+    display: none !important;
+  }
+  .header-layout5 .header-logo img {
+    max-width: 88px !important;
+  }
+  .header-layout5 .header-button {
+    padding: 0 !important;
+  }
+  .header-layout5 .header-button .promist-link img {
+    height: 20px !important;
+    width: auto !important;
+  }
+}
+
 
 /* ── Mobile sidebar: white frosted glass + dark text ── */
 @media (max-width: 767px) {