header-back-mobile

homepage.html

@@ -57,6 +57,9 @@
 
         <!-- Mobile Menu -->
         <div class="header-mobile-menu">
+          <div class="header-mobile-back">
+
+          
           <div class="header-mobile-top">
             <button class="header-mobile-close">
               <svg aria-hidden="true" width="48px" height="48px">
@@ -183,6 +186,8 @@
               </div>
             </div>
           </div>
+
+          </div>
         </div>
       </header>
 

src/assets/css/homepage-responsive.css

@@ -231,7 +231,9 @@
   .header-phone {
     display: none;
   }
-
+  .hero-header{
+    height: 78px;
+  }
   .header-menu-toggle {
     display: flex;
 

src/assets/css/homepage.css

@@ -121,15 +121,19 @@ section > .container {
 
 .header-mobile-menu {
   position: fixed;
-  inset: 0;
-  background: #ffffff;
+   top: 0;
+  right: 0;
+  width: 100%;
+  height: 100dvh;
+  background: #ffffff !important;
   display: none;
   flex-direction: column;
-  z-index: 900;
+  z-index: 1002;
 }
 
 .header-mobile-menu.active {
   display: flex;
+
 }
 
 .header-mobile-top {
@@ -203,7 +207,10 @@ section > .container {
   justify-content: space-between;
   padding: 0 20px;
 }
-
+.header-mobile-back{
+  background-color: #ffffff;
+  
+}
 .header-mobile-socials {
   display: flex;
   gap: 18px;
@@ -321,6 +328,7 @@ section > .container {
   top: 0;
   left: 0;
   width: 100%;
+  height: 80px;
   background: transparent !important;
   opacity: 0;
   transform: translateY(-100px);