/* Header sticky : la ligne logo + menu reste visible en haut au scroll, la barre du haut (liens sociaux + compte/panier, .header-top) défile normalement et disparaît, aussi bien en desktop qu'en mobile. Pourquoi "position: sticky" est posé sur #site-header et non sur .wrap-header : le parent direct de .wrap-header (.container) fait exactement la même hauteur que lui (aucun autre contenu à l'intérieur), donc un sticky posé là n'a aucune marge pour "rester collé" — il se décolle dans la même fraction de pixel où il se colle, sans effet visible. #site-header, lui, a pour parent , largement plus haut que le header : le sticky y a la place de fonctionner. Le décalage négatif (--shop1kdo-sticky-header-offset, hauteur de .header-top mesurée en JS, voir sticky-header.js) fait que le header ne se bloque qu'une fois .header-top remonté hors champ, pile au moment où seule la ligne logo/menu doit rester visible. Pour désactiver sans supprimer le code : commenter l'appel wp_enqueue_scripts() portant le commentaire "Header sticky" dans functions.php. */ .site-header { position: sticky; top: calc(-1 * var(--shop1kdo-sticky-header-offset, 0px)); z-index: 20; /* .wrap-header est limité à max-width:1530px et centré : sans ce fond posé ici, sur #site-header (pleine largeur), les bords gauche/droite restent transparents une fois collé sur les écrans plus larges que 1530px et laissent voir le contenu défiler. */ background: var(--white-color, #fff); transition: box-shadow .25s ease; } /* Légère ombre ajoutée par sticky-header.js une fois le header réellement collé, pour le détacher visuellement du contenu qui défile dessous. Posée sur #site-header (pleine largeur) et non .wrap-header (limité à max-width:1530px, centré) : une ombre sur l'élément étroit créait une rupture visible aux bords, alors que le fond blanc, lui, couvre déjà toute la largeur. */ .site-header.is-header-stuck { box-shadow: 0 2px 10px rgba(0, 0, 0, .08); } /* Icône panier dupliquée dans la ligne blanche (voir header.php, .sticky-header-icons juste avant .mobile-search-toggle) : invisible tant que le header n'est pas collé — la barre noire .header-top, visible en haut de page, suffit alors — et affichée uniquement une fois .is-header-stuck posée par sticky-header.js, pour que le panier reste accessible après que .header-top a défilé hors champ. Sélecteurs "display" volontairement sur-spécifiés (3 classes) plutôt que .sticky-header-icons seul : la classe .header-top-icons (réutilisée ici pour hériter du positionnement du badge, voir global/_header.scss) porte déjà "display:flex" avec la même spécificité qu'un .sticky-header-icons isolé — à spécificité égale, c'est l'ordre de chargement des feuilles qui aurait tranché, et zoo-styles.css chargeant après ce fichier, le panier restait visible en permanence au lieu de n'apparaître qu'au collage. */ .wrap-site-navigation .header-top-icons.sticky-header-icons { display: none; margin-left: 10px; } .site-header.is-header-stuck .wrap-site-navigation .header-top-icons.sticky-header-icons { display: flex; } @media (max-width: 1024.98px) { /* Le menu off-canvas (.primary-menu, .menu-overlay) est en position:fixed avec un z-index plus faible (3 et 2, voir global/_header.scss) que celui du header collé (20) : sans ce correctif, une fois le header sticky actif sur mobile, ouvrir le menu affiche le panneau sous la ligne blanche du header au lieu de par-dessus. */ .menu-overlay { z-index: 21; } .primary-menu { z-index: 22; } } /* Popups wishlist ("Ma liste de souhait") et comparateur : .zoo-popup-panel, injecté en direct enfant de par wishlist.js/products-compare.js, a z-index:11 dans le thème parent (assets/css/woocommerce/wlcp.scss) - donc sous le header collé (z-index 20 ci-dessus) une fois celui-ci actif. Sans ce correctif, la bande noire du titre du popup ("MA LISTE DE SOUHAIT" / en-têtes du tableau comparateur) se retrouve masquée sous la ligne blanche du header dès que le popup atteint le haut de la zone visible : en permanence pour le comparateur (tableau toujours assez haut), seulement si la liste contient beaucoup de produits pour la wishlist. Même correctif que .menu-overlay/.primary-menu ci-dessus. */ .zoo-popup-panel { z-index: 21; } @media (max-width: 767.98px) { /* Réduit la largeur du logo pour laisser plus de place aux icônes panier (.sticky-header-icons) ajoutées à côté de la loupe et du menu sandwich sur mobile. Bootstrap dimensionne .col-8/.col-4 à la fois via flex-basis (flex: 0 0 66.6667%) et via max-width (même valeur) : sans overrider aussi max-width, ce plafond continue de limiter la colonne à sa largeur d'origine (33.3333% pour .col-4) même une fois le flex-basis changé, ce qui laissait presque toute la place gagnée sur le logo inutilisée. */ #site-identity.col-8 { flex: 0 0 50%; width: 50%; max-width: 50%; } .wrap-header .wrap-site-navigation.col-4 { flex: 0 0 50%; width: 50%; max-width: 50%; } /* Cluster panier / loupe / sandwich poussé au maximum contre le bord droit (le padding du wrap-header suffit comme seule marge), avec un peu d'air entre loupe et sandwich pour ne pas les coller l'un à l'autre. */ .wrap-site-navigation .header-top-icons.sticky-header-icons { margin-right: 20px; } .mobile-search-toggle { margin-right: 16px; } }