header

web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css

@@ -172,18 +172,16 @@ h3 {
   user-select: none;
 }
 .layout-container header {
-  flex: 0 0 100%;
+  flex: 0 0 50%;
 }
 .layout-container footer {
   flex: 0 0 100%;
 }
 .layout-container main {
   width: 100%;
-}
-
-.layout-content {
   padding-top: 320px;
 }
+
 @media (max-width: 500px) {
   .layout-content {
     padding-top: 50px;
@@ -225,26 +223,24 @@ svg.ext {
 
 /*partials*/
 header {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  grid-template-rows: repeat(3, 1fr);
+  display: flex;
+  flex-direction: row;
   height: 320px;
   background-color: rgb(255, 255, 255);
   z-index: 99;
   width: 38vw;
   max-width: 100vw;
+  position: fixed;
   top: 0;
-  border: 1px solid #808080;
 }
 header .contextual-region {
   width: max-content;
 }
 header .header_left_container {
-  grid-column: 1/span 11;
-  grid-row: 1/span 3;
+  flex: 0 0 60%;
   display: flex;
   flex-direction: row;
-  border-right: 1px solid #808080;
+  border-bottom: 1px solid #808080;
   padding-left: 2%;
   padding-right: 2%;
 }
@@ -277,7 +273,8 @@ header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain {
 header .header_left_container img {
   width: auto;
   margin: auto;
-  height: 320px;
+  height: calc(320px - 5rem);
+  padding: 2rem;
 }
 @media (max-width: 891px) {
   header .header_left_container img {
@@ -295,6 +292,7 @@ header .header_left_container img {
   }
 }
 header .header_right_container {
+  display: none;
   margin: auto;
 }
 @media (max-width: 660px) {
@@ -335,84 +333,38 @@ header .header_right_container .language-switcher-language-url ul .is-active {
   font-weight: 600;
 }
 header .header_nav_container {
-  display: none;
-  grid-row: 3;
-  grid-column: 1/span 12;
+  flex: 0 0 30%;
   top: 100%;
   width: 100%;
-  background: rgb(232, 235, 244);
+  background: rgb(7, 50, 194);
   border-bottom: 1px solid #808080;
   border-top: 1px solid #808080;
-  font-size: 1.2rem;
   text-align: center;
 }
-header .header_nav_container #block-quartiers-de-demain-entete {
-  grid-column: 1/span 11;
-  order: 2;
-  margin: auto;
-}
 header .header_nav_container #block-quartiers-de-demain-entete h2 {
   display: none;
 }
-header .display-nav-opened {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  grid-gap: 10px;
-}
-header .open-block, header .open-block.opened {
-  cursor: pointer;
-}
-header .open-block span, header .open-block.opened span {
-  display: block;
-  width: 58px;
-  height: 2px;
+header .header_nav_container #block-quartiers-de-demain-entete ul {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
   position: relative;
-  background: black;
-  border-radius: 3px;
-  z-index: 1;
+  top: 80px;
+  padding-left: 1rem;
+  margin: 0;
 }
-@media (max-width: 660px) {
-  header .open-block span, header .open-block.opened span {
-    width: 25px;
-  }
+header .header_nav_container #block-quartiers-de-demain-entete ul li a {
+  text-transform: uppercase;
+  color: white;
+  font-size: 0.5rem;
 }
-header .open-block {
-  height: 100%;
-  display: grid;
-  align-items: center;
-  margin: auto;
+header .header_nav_container #block-quartiers-de-demain-entete ul li:not(:last-of-type) ::after {
+  content: "";
+  display: block;
+  width: 80px;
+  border-bottom: solid white 1px;
+  padding-bottom: 0.3rem;
 }
-@media (max-width: 450px) {
-  header .open-block {
-    height: 50px;
-  }
-}
-header .open-block span {
-  margin-bottom: 13px;
-  transform-origin: 4px 0px;
-}
-@media (max-width: 660px) {
-  header .open-block span {
-    margin-bottom: 5px;
-  }
-}
-header .open-block.opened {
-  margin: auto;
-}
-header .open-block.opened span {
-  transform-origin: center;
-  margin-bottom: 0;
-}
-header .open-block.opened > div > span:first-child {
-  transform: translateY(57%) rotate(45deg);
-}
-header .open-block.opened > div > span:nth-child(2) {
-  transform: rotate(-45deg);
-}
-header .open-block.opened > div > span:nth-child(3) {
-  display: none;
-}
-
 footer {
   z-index: 100;
 }
@@ -1370,9 +1322,6 @@ footer span.totop #toTop .arrow-up::before {
 #consultation {
   background-color: #f6f7f3;
 }
-#consultation .layout-content {
-  padding-top: 1rem;
-}
 #consultation .layout-content .content_container {
   display: flex;
   flex-direction: column;