From 1434508f5995d4316dfb2fd18fdc7926a4ece6ee Mon Sep 17 00:00:00 2001
From: David Ichim <ichim.david@gmail.com>
Date: Fri, 14 Oct 2022 16:35:28 +0200
Subject: [PATCH] fix(header): hero text going over the logo and menu on mobile
 resolutions

- changed the implementation to use a negative margin with size of
  the height of the eea header instead of absolute position since it's changed
  from mobile to tablet to desktop, this way we avoid the text running over the
  frontpage menu
---
 theme/themes/eea/extras/custom.overrides |  3 +--
 theme/themes/eea/extras/header.less      | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/theme/themes/eea/extras/custom.overrides b/theme/themes/eea/extras/custom.overrides
index a951ef3e0a..988553d895 100644
--- a/theme/themes/eea/extras/custom.overrides
+++ b/theme/themes/eea/extras/custom.overrides
@@ -15,9 +15,8 @@
   font-size: @h1;
 }
 
-// remove margin and padding from homepage content-area since we have the bg image over the header
+// remove padding from homepage content-area since we have the bg image over the header
 .homepage .content-area {
-    margin-top: 0 !important;
     padding-top: 0 !important;
 }
 
diff --git a/theme/themes/eea/extras/header.less b/theme/themes/eea/extras/header.less
index 2c77e2bba7..c874bdaf82 100644
--- a/theme/themes/eea/extras/header.less
+++ b/theme/themes/eea/extras/header.less
@@ -323,13 +323,15 @@
 }
 
 @media all and (max-width: @largestMobileScreen) {
+  .homepage .content-area {
+    margin-top: -@mobileMainSectionHeight;
+  }
   .eea.header .top.bar .ui.container {
     width: 100% !important; //override semantic auto to display content with space between them
   }
 }
 .homepage .eea.header {
-  position: absolute;
-  top: 0;
+  position: relative;
   z-index: 1;
   width: 100%;
 }
@@ -472,6 +474,10 @@
     margin-top: @tabletLogoMarginTop;
   }
 
+  .homepage .content-area {
+    margin-top: -@tabletMainSectionHeight !important;
+  }
+
   /* Search box */
   #search-box {
     height: @tabletPopUpHeight;
@@ -563,6 +569,10 @@
     margin-top: @computerLogoMarginTop;
   }
 
+  .homepage .content-area {
+    margin-top: -@computerMainSectionHeight !important;
+  }
+
   /* Search box */
   #search-box {
     height: @computerPopUpHeight;