js header

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

@@ -412,6 +412,10 @@ header .header:hover + .header_nav_container {
   transform: translateX(0);
 }
 
+.shrink {
+  height: 260px !important;
+}
+
 /* Taille définitive du header après l'animation */
 .header--collapsed {
   height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */

web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js

@@ -84,7 +84,6 @@
   document.addEventListener('DOMContentLoaded', function() {
 
     const header = document.querySelector('header');
-
     const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
     const isTargetPath = window.location.pathname === '/';
 
@@ -131,6 +130,15 @@
       isHidden = false;
     }
     
+      // Fonction pour ajuster la hauteur du header lors du défilement
+      function adjustHeaderHeight() {
+        if (window.scrollY > 0) {
+          headerLeftContainer.classList.add('shrink');
+        } else {
+          headerLeftContainer.classList.remove('shrink');
+        }
+      }
+
     function handleScroll() {
       let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
   
@@ -156,6 +164,7 @@
     }
   
     window.addEventListener('scroll', handleScroll);
+    window.addEventListener('scroll', adjustHeaderHeight);
   
     // Mouse events for desktop
     headerLeftContainer.addEventListener('mouseenter', handleTouchAndMouseEnter);

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss

@@ -8,6 +8,7 @@ header{
     position: fixed;
     top: 0;
     transition: none;
+   
     // transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
     // transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
     @media(max-width: 810px){
@@ -188,7 +189,9 @@ header{
     transform: translateX(0);
   }
 }
-
+.shrink{
+    height: 260px !important;
+}
 /* Taille définitive du header après l'animation */
 .header--collapsed {
     height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */