modifs header sticky

web/themes/erabletheme/css/styles.css

@@ -46,13 +46,18 @@ a {
   text-decoration: none;
 }
 
-main[role=main] {
-  margin-top: 10vh;
+/* main[role="main"] {
+    margin-top: 10vh;
+    @media (min-width: $breakpoint_desktop) {
+        margin-top: calc(10vh + 3rem);
+    }
+} */
+body {
+  overflow-x: hidden;
 }
-@media (min-width: 1080px) {
-  main[role=main] {
-    margin-top: calc(10vh + 3rem);
-  }
+
+.layout-container {
+  margin: 0 !important;
 }
 
 strong {
@@ -77,21 +82,16 @@ body.toolbar-fixed header[role=banner] {
   top: 2.4em !important;
 }
 
-.layout-container {
-  width: 100%;
-  overflow: hidden;
-}
 .layout-container header[role=banner] {
   width: 100%;
   background: white;
-  position: fixed;
-  top: 0;
-  left: 0;
   z-index: 99;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
 }
 @media (min-width: 1080px) {
   .layout-container header[role=banner] {
+    position: sticky;
+    top: -12vh;
     box-shadow: none;
   }
 }
@@ -100,7 +100,7 @@ body.toolbar-fixed header[role=banner] {
   grid-template-columns: repeat(16, 1fr);
 }
 .layout-container header[role=banner] > div > div {
-  height: 10vh;
+  height: 12vh;
   grid-row: 1;
   max-height: 100%;
   width: 100%;
@@ -112,7 +112,7 @@ body.toolbar-fixed header[role=banner] {
   align-items: center;
 }
 .layout-container header[role=banner] > div > div > div > div {
-  height: 10vh;
+  height: 12vh;
 }
 .layout-container header[role=banner] > div > div > div > div a {
   display: block;
@@ -131,6 +131,10 @@ body.toolbar-fixed header[role=banner] {
 .layout-container header[role=banner] > div #block-erabletheme-logorep-2 {
   grid-column: 1/5;
 }
+.layout-container header[role=banner] > div #block-erabletheme-logorep-2 img {
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+}
 @media (min-width: 760px) {
   .layout-container header[role=banner] > div #block-erabletheme-logorep-2 {
     grid-column: 0/4;
@@ -142,23 +146,38 @@ body.toolbar-fixed header[role=banner] {
   }
 }
 .layout-container header[role=banner] > div #block-erabletheme-logoepau-2 {
-  grid-column: 5/10;
+  grid-column: 5/9;
+}
+.layout-container header[role=banner] > div #block-erabletheme-logoepau-2 > div {
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.layout-container header[role=banner] > div #block-erabletheme-logoepau-2 > div > div > a > img {
+  transform: translateX(-20px);
+  padding-top: 1.2rem;
+  padding-bottom: 1.2rem;
 }
 @media (min-width: 760px) {
   .layout-container header[role=banner] > div #block-erabletheme-logoepau-2 {
     grid-column: 4/7;
   }
+  .layout-container header[role=banner] > div #block-erabletheme-logoepau-2 > div > div > a > img {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
 }
 @media (min-width: 1080px) {
   .layout-container header[role=banner] > div #block-erabletheme-logoepau-2 {
     grid-column: 3/6;
   }
-  .layout-container header[role=banner] > div #block-erabletheme-logoepau-2 img {
-    padding: 0 1rem;
+  .layout-container header[role=banner] > div #block-erabletheme-logoepau-2 > div > div > a > img {
+    transform: translateX(-40px);
+    padding-top: 30px;
+    padding-bottom: 30px;
   }
 }
 .layout-container header[role=banner] > div #block-erabletheme-logoerable {
-  grid-column: 11/15;
+  grid-column: 10/15;
 }
 @media (min-width: 1080px) {
   .layout-container header[role=banner] > div #block-erabletheme-logoerable {
@@ -166,7 +185,9 @@ body.toolbar-fixed header[role=banner] {
   }
 }
 .layout-container header[role=banner] > div #block-erabletheme-logoerable img {
-  padding: 0 1.5rem;
+  padding-right: 1rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
 }
 .layout-container header[role=banner] > div #block-erabletheme-socialmedialinks {
   display: none;
@@ -181,7 +202,7 @@ body.toolbar-fixed header[role=banner] {
 }
 .layout-container header[role=banner] > div #block-erabletheme-header #hamburger {
   cursor: pointer;
-  width: 100%;
+  width: auto;
   height: 100%;
   background-color: #00ff80;
   display: flex;
@@ -222,16 +243,14 @@ body.toolbar-fixed header[role=banner] {
   transform: translate(0rem, -0.5rem) rotate(45deg);
 }
 .layout-container header[role=banner] > div #block-erabletheme-header ul:not(.social-media-links--platforms) {
+  position: absolute;
+  z-index: -1;
   display: none;
   height: auto;
   max-height: 0vh;
   transition: max-height 0.9s ease, padding 0.5s ease-out;
-  position: fixed;
   background-color: #314e41;
-  top: 10vh;
-  left: 0;
   width: 100vw;
-  z-index: 0;
   padding: 0;
   align-items: center;
   flex-direction: column;
@@ -320,12 +339,8 @@ body.toolbar-fixed header[role=banner] {
   margin-top: 0 !important;
 }
 .layout-container #block-erabletheme-navigationprincipale {
-  position: fixed;
-  width: 100%;
-  margin-top: 10vh;
+  width: 100vw;
   display: none;
-  grid-column: 1/17;
-  grid-row: 2;
   background-color: white;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
 }