fix(header): hero text going over the logo and menu on mobile resolut…

…ions

- 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

@@ -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;
 }
 

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;