/* ============================================================================ roannay.be — Menu desktop (FR) Lot 1 : réduction du menu principal + bouton « Réserver » doré. Constructeur : WGL Builder (stoni). Ne concerne pas Elementor. PRÉREQUIS — deux classes à poser dans Apparence → Menus (Options de l'écran → cocher « Classes CSS ») : .nav-desktop sur les 4 entrées qui restent dans la barre : Restaurant, Hôtel, Brasserie, Offres .bt-reserver sur l'entrée parente « Réserver » (celle qui porte les 3 sous-entrées) Tout ce qui ne porte pas l'une de ces classes disparaît de la barre desktop et reste disponible dans le panneau burger. C'est volontaire : une entrée ajoutée plus tard au menu n'ira pas encombrer la barre. PIÈGE À CONNAÎTRE — l'ordre de chargement Le CSS personnalisé du site vit dans Apparence → Personnaliser → CSS additionnel, imprimé dans wp_head à la priorité 101. Une feuille mise en file classiquement s'imprime AVANT, et perd donc à spécificité égale. Le snippet livré imprime ce fichier à la priorité 110 pour passer après. Les quelques !important ci-dessous ne visent pas ce bloc mais des déclarations !important du personnalisateur, ou des styles inline posés par le constructeur d'en-tête. Ils sont annotés un par un : ne pas les retirer sans vérifier. Le menu principal est imprimé 5 fois dans la page (en-tête, en-tête collant, en-tête mobile, panneau mobile, pied de page). Les sélecteurs sont donc systématiquement portés par un conteneur. ========================================================================= */ :root { --pc-or: #C7B474; --pc-or-hover: #cbbc9d; --pc-noir: #232323; } /* --------------------------------------------------------------------------- 1. La barre desktop ne garde que les 4 entrées, le bouton et les langues ------------------------------------------------------------------------ */ /* VERROU — à lire avant de toucher à cette section. Tout ce bloc est conditionné par `ul:has(> li.nav-desktop)` : il ne s'applique QUE si au moins une entrée du menu porte la classe nav-desktop. Sans ce verrou, la règle de masquage s'applique dès le dépôt du fichier et fait disparaître l'intégralité du menu, puisque aucune entrée ne porte encore la classe. C'est arrivé le 22/09 en production. Ne pas retirer le `:has()` en pensant simplifier. Sécurité supplémentaire : un navigateur qui ne connaîtrait pas :has() invalide la règle entière et l'ignore — le menu reste alors complet. Le défaut penche du bon côté. */ .wgl-site-header .primary-nav > ul:has(> li.nav-desktop) > li:not(.nav-desktop):not(.bt-reserver):not(.pll-parent-menu-item), .wgl-sticky-header .primary-nav > ul:has(> li.nav-desktop) > li:not(.nav-desktop):not(.bt-reserver):not(.pll-parent-menu-item) { display: none; } /* --------------------------------------------------------------------------- 1 bis. Le groupe de droite : langue + bouton, collés au burger Disposition visée, celle de petit-roannay.be : [logo] RESTAURANT HÔTEL BRASSERIE OFFRES ........ 🇫🇷 [RÉSERVER] [☰] Mesuré avant intervention : la rangée de l'en-tête est un flex en `space-between` à trois colonnes — logo 0→177, menu 380→1295, burger 1499→1585. Il reste donc 204 px de vide entre la fin du menu et le burger. Pour coller le groupe au burger, la colonne centrale doit s'étendre, et le sélecteur de langue porter un `margin-left: auto` qui repousse tout ce qui le suit. Effet de bord assumé : le menu remonte contre le logo, exactement comme sur petit-roannay. VERROU : conditionné à la présence du bouton (`li.bt-reserver`), et non des classes nav-desktop. Les deux étapes sont indépendantes — on peut ajouter le bouton sans avoir encore réduit le menu à 4 entrées, et l'inverse. ------------------------------------------------------------------------ */ /* Toute la chaîne doit s'étendre, sinon le `margin-left: auto` plus bas n'a rien à pousser. Mesuré : la colonne fait 1303 px mais .header_area_container ne faisait que 1094 — il se dimensionne sur son contenu, et la nav est en inline-block. Les quatre niveaux sont donc traités, pas seulement la colonne. */ .wgl-site-header .position_center_middle:has(li.bt-reserver), .wgl-sticky-header .position_center:has(li.bt-reserver) { flex: 1 1 auto; } .wgl-site-header .position_center_middle:has(li.bt-reserver) > .header_area_container, .wgl-sticky-header .position_center:has(li.bt-reserver) > .header_area_container { flex: 1 1 auto; width: 100%; } .wgl-site-header .position_center_middle:has(li.bt-reserver) .primary-nav, .wgl-sticky-header .position_center:has(li.bt-reserver) .primary-nav { display: block; width: 100%; } /* Tout le contenu du menu est justifié à droite : logo seul à gauche, et l'ensemble des liens groupés à droite contre le burger. `justify-content: flex-end` remplace le `margin-left: auto` qui servait auparavant à ne pousser que le sélecteur de langue et le bouton — il n'y a plus rien à séparer, tout part à droite. */ .wgl-site-header .primary-nav > ul:has(> li.bt-reserver), .wgl-sticky-header .primary-nav > ul:has(> li.bt-reserver) { display: flex; align-items: center; justify-content: flex-end; width: 100%; } /* Le sélecteur de langue puis le bouton ferment la ligne, quel que soit leur rang dans Apparence → Menus : pas d'ordre imposé au back-office. */ .wgl-site-header .primary-nav > ul:has(> li.bt-reserver) > li.pll-parent-menu-item, .wgl-sticky-header .primary-nav > ul:has(> li.bt-reserver) > li.pll-parent-menu-item { order: 8; } .wgl-site-header .primary-nav > ul:has(> li.bt-reserver) > li.bt-reserver, .wgl-sticky-header .primary-nav > ul:has(> li.bt-reserver) > li.bt-reserver { order: 9; margin-left: 14px; } /* --------------------------------------------------------------------------- 2. Typographie des 4 entrées — Raleway 15 / majuscules / interlettrage 1px Raleway est déjà chargée par le thème : rien à ajouter. La taille 15px et la couleur blanche viennent déjà du personnalisateur ; on n'ajoute ici que la casse et l'interlettrage. ------------------------------------------------------------------------ */ /* Casse d'origine conservée : pas de `text-transform`. Le brief prévoyait des majuscules, écartées à l'usage — décision du 22/09. Le bouton « Réserver », lui, reste en majuscules : c'est un CTA, et c'est la forme de petit-roannay. */ .wgl-theme-header .primary-nav > ul > li.nav-desktop > a .item_text { letter-spacing: 1px; } /* Les liens respirent : 18px de part et d'autre, soit 36px entre deux libellés au lieu des 20px du personnalisateur (`.primary-nav > ul > li > a{padding:0 10px}`). VERROU sur `nav-desktop`, et non sur le bouton : mesuré à 1441 px, cet élargissement coûte 144 px de plus avec les 9 entrées d'origine, et le menu vient alors chevaucher le logo. Il ne doit donc s'appliquer qu'une fois la barre réduite à 4 entrées. Avec 4 entrées à 1441 px, le menu démarre à 652 — 475 px de marge devant le logo. */ .wgl-site-header .primary-nav > ul:has(> li.nav-desktop) > li > a, .wgl-sticky-header .primary-nav > ul:has(> li.nav-desktop) > li > a { padding: 0 18px; } /* Le « + » des entrées à sous-menu disparaît de la barre. Il reste dans le panneau mobile, où il sert de bouton de dépliage. */ .wgl-site-header .primary-nav > ul > li > a .menu-item_plus, .wgl-sticky-header .primary-nav > ul > li > a .menu-item_plus { display: none; } /* --------------------------------------------------------------------------- 2 bis. L'étoile Michelin Classe `nav-etoile` à ajouter dans Apparence → Menus, à côté de `nav-desktop`, sur l'entrée Restaurant. Champ Classes CSS : nav-desktop nav-etoile Étoile typographique et non image : elle suit la taille et la couleur du texte, ne demande aucun fichier à téléverser, et se répliquera d'elle-même dans les menus EN / DE / NL — il suffira d'y poser la même classe. ------------------------------------------------------------------------ */ .wgl-site-header .primary-nav > ul > li.nav-etoile > a .item_text::after, .wgl-sticky-header .primary-nav > ul > li.nav-etoile > a .item_text::after { content: "\2605"; margin-left: 7px; color: var(--pc-or); font-size: .8em; vertical-align: 2px; letter-spacing: 0; } /* --------------------------------------------------------------------------- 3. Bouton « Réserver » doré La pastille est portée par .item_text, pas par le : le lien garde la hauteur pleine de l'en-tête (105px), donc l'alignement vertical calculé par le thème, et la zone cliquable reste généreuse autour de la pastille. ------------------------------------------------------------------------ */ .wgl-theme-header .primary-nav > ul > li.bt-reserver > a { padding: 0 10px; } .wgl-theme-header .primary-nav > ul > li.bt-reserver > a .item_text { display: inline-block; background-color: var(--pc-or); /* !important : le personnalisateur force color:#272727!important sur les liens du menu de l'en-tête collant (.wgl-sticky-header .primary-nav > ul > li > a). Sans cela, le libellé du bouton devient gris en sticky. */ color: var(--pc-noir) !important; font-family: Raleway, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; text-transform: uppercase; letter-spacing: 1px; padding: 13px 26px; border-radius: 2px; transition: background-color .25s ease; } .wgl-theme-header .primary-nav > ul > li.bt-reserver > a:hover .item_text, .wgl-theme-header .primary-nav > ul > li.bt-reserver:hover > a .item_text { background-color: var(--pc-or-hover); color: var(--pc-noir) !important; } /* Le thème décore les entrées de menu au survol (soulignement, puce). Sur un bouton plein, ces décorations se voient : on les neutralise ici seulement. */ .wgl-theme-header .primary-nav > ul > li.bt-reserver > a::before, .wgl-theme-header .primary-nav > ul > li.bt-reserver > a::after, .wgl-theme-header .primary-nav > ul > li.bt-reserver > a .menu-item_plus { display: none; } /* --------------------------------------------------------------------------- 4. Les 3 sous-entrées du bouton — panneau sombre sous le bouton ------------------------------------------------------------------------ */ .wgl-theme-header .primary-nav > ul > li.bt-reserver > .sub-menu { background-color: var(--pc-noir); min-width: 260px; padding: 8px 0; border-top: 2px solid var(--pc-or); /* Aligné sur le bord droit du bouton : le panneau est plus large que le bouton, un alignement à gauche le ferait déborder hors de l'écran. */ left: auto; right: 10px; } /* GARDE-FOU — uniformité des trois volets, quelles que soient leurs classes. Les enfants de « Réserver » sont les anciennes entrées « Réservation … » réutilisées. L'une d'elles avait gardé ses classes `link-mobile bt-menu-mobile`, que le personnalisateur peint en doré : .bt-menu-mobile { background:#C7B474; margin:10px 0; } li.bt-menu-mobile a { padding:3px!important; text-align:center!important; color:#232323!important; } Résultat : un volet doré, centré, aux marges différentes des deux autres. Le vrai correctif est de vider le champ « Classes CSS » de cette entrée dans Apparence → Menus. Ces règles sont un filet, pour que le déroulant reste homogène si la même classe traîne ailleurs — notamment en répliquant le menu en EN / DE / NL. Les !important répondent à ceux du personnalisateur. */ .wgl-theme-header .primary-nav > ul > li.bt-reserver > .sub-menu > li { background-color: transparent !important; margin: 0 !important; } .wgl-theme-header .primary-nav > ul > li.bt-reserver > .sub-menu > li > a { padding: 11px 24px !important; text-align: left !important; } .wgl-theme-header .primary-nav > ul > li.bt-reserver > .sub-menu > li > a .item_text { font-family: Raleway, sans-serif; font-size: 14px; letter-spacing: .5px; text-transform: none; color: #fff; transition: color .2s ease; } .wgl-theme-header .primary-nav > ul > li.bt-reserver > .sub-menu > li > a:hover .item_text { color: var(--pc-or); } /* --------------------------------------------------------------------------- 5. Le burger doré (élément « Side Panel » du thème) Référence : petit-roannay.be — carré doré, pleine hauteur de la barre, icône à trois barres. Le thème dessine un damier de 9 points (9 positionnés en absolu dans une boîte de 24 px) et anime leur décalage au survol. On masque les points et on redessine un burger : la barre du milieu est le fond de .side_panel-toggle-inner, les deux autres sont ses pseudo-éléments. Le fond doré est posé sur .side_panel_inner, pas sur .side_panel : c'est .side_panel_inner qui porte le style inline du constructeur d'en-tête (background-color + color), d'où les !important. Le corriger proprement se fait dans Theme Options → Header → Header Builder (couleurs du Side Panel) ; tant que ce n'est pas fait, ces trois lignes tiennent le rendu. ------------------------------------------------------------------------ */ .wgl-theme-header .side_panel { min-width: 86px; /* le thème impose 105px : trop large pour un carré */ } .wgl-theme-header .side_panel .side_panel_inner { background-color: var(--pc-or) !important; color: var(--pc-noir) !important; transition: background-color .25s ease; } /* PIÈGE — les trois barres sont dessinées en `currentColor`, et `currentColor` se résout sur la couleur de l'ÉLÉMENT, pas sur celle d'un ancêtre lointain. Le personnalisateur force `.header_area_container a { color:#cccccc!important }`, et le lien du burger est justement un : la couleur foncée posée ci-dessus sur .side_panel_inner était donc réécrasée un cran plus bas, et l'icône ressortait en gris clair sur le fond doré — peu lisible. La couleur est donc reposée sur le lien lui-même. Ne pas supprimer cette règle en pensant qu'elle fait doublon avec la précédente. */ .wgl-theme-header .side_panel .side_panel-toggle { color: var(--pc-noir) !important; } .wgl-theme-header .side_panel .side_panel_inner:hover { background-color: var(--pc-or-hover) !important; } /* Les 9 points disparaissent */ .wgl-theme-header .side_panel .side_panel-toggle-inner span { display: none; } /* Trois barres à la place */ .wgl-theme-header .side_panel .side_panel-toggle-inner { width: 26px; height: 2px; margin: 0 auto; background-color: currentColor; line-height: 0; } .wgl-theme-header .side_panel .side_panel-toggle-inner::before, .wgl-theme-header .side_panel .side_panel-toggle-inner::after { content: ""; position: absolute; left: 0; width: 26px; height: 2px; background-color: currentColor; } .wgl-theme-header .side_panel .side_panel-toggle-inner::before { top: -8px; } .wgl-theme-header .side_panel .side_panel-toggle-inner::after { top: 8px; } /* --------------------------------------------------------------------------- 6. La barre supérieure vide Ses widgets ont été retirés en FR (22/09) : #topbar-left et #topbar-right ne sont plus dans le DOM du tout. Restait une bande de 51 px en rgba(24,24,24,0.9) avec sa bordure, vide, et l'en-tête décalé à top: 50px pour lui faire place. #topbar-milieu contient encore deux widgets (adresse, horaires d'ouverture), mais la zone est en display:none depuis le personnalisateur. Ils ne comptent donc pas comme contenu — d'où la condition portée sur les deux seules zones réellement affichables. La règle est conditionnée à l'ABSENCE de widgets, et non à la langue : elle s'éteindra d'elle-même dans chaque langue au fur et à mesure du nettoyage, sans qu'il faille y revenir. Écrire `html:lang(fr-FR)` aurait demandé quatre passages et un oubli probable. Ce bloc est ici plutôt que dans un fichier à part parce qu'il est indissociable du calage vertical de l'en-tête, et pour éviter de te faire rouvrir functions.php pour quinze lignes. La barre est de toute façon déjà masquée sous 1440 px par le personnalisateur : cela ne concerne que le desktop. ------------------------------------------------------------------------ */ .fullwidth-wrapper.topbar-header:not(:has(#topbar-left .nwa-widget)):not(:has(#topbar-right .nwa-widget)) { display: none; } /* L'en-tête remonte d'autant. Les !important répondent à ceux du personnalisateur (`.wgl-theme-header.header_overlap{top:50px!important}`). */ .fullwidth-wrapper.topbar-header:not(:has(#topbar-left .nwa-widget)):not(:has(#topbar-right .nwa-widget)) ~ header.wgl-theme-header.header_overlap { top: 0 !important; } .fullwidth-wrapper.topbar-header:not(:has(#topbar-left .nwa-widget)):not(:has(#topbar-right .nwa-widget)) ~ header.wgl-theme-header .wgl-sticky-header.sticky_active { top: 0 !important; } /* --------------------------------------------------------------------------- 7. Garde-fou : un seul burger Si l'élément « Side Panel » est ajouté dans l'en-tête desktop pour servir de burger, il ne doit pas coexister avec le burger de l'en-tête mobile en dessous du seuil mobile. Le seuil est un réglage du thème (Theme Options → Header → Header Mobile) : si tu le changes, change aussi la valeur ci-dessous — c'est le seul endroit du fichier qui la répète. ------------------------------------------------------------------------ */ @media only screen and (max-width: 1440px) { .wgl-theme-header .side_panel, .wgl-theme-header .side_panel-toggle { display: none !important; } }