gezet; die marge moet weg. */ .ast-header-html-1 .ast-builder-html-element p { margin: 0; } /* ------------------------------------------------------------- 4b. knoptekst Astra zet alle knoppen op `text-transform: capitalize`, waardoor de header "Maak Een Afspraak" toont terwijl de homepage "Maak een afspraak" schrijft. Alleen de headerknop wordt hier rechtgezet; andere knoppen blijven zoals ze zijn. */ .ast-header-button-1 .ast-custom-button { text-transform: none; } /* Onder 1200px wordt het krap naast menu en knop; dan verdwijnt het nummer bewust. De knop en het menu blijven staan, en op mobiel staat het nummer in het uitklapmenu. */ @media (max-width: 1200px) { .ast-header-html-1 { display: none !important; } } /* --------------------------------------------------------------- 5. hoogte De balk was 60px hoog tegenover ruim 90px op de homepage. Iets meer lucht sluit dichter aan bij de referentie zonder de pagina-indeling te verschuiven. */ .ast-below-header-bar, .ast-below-header-bar .site-below-header-wrap { min-height: 78px; } .ast-below-header-bar .main-header-menu > .menu-item { line-height: 78px; } @media (max-width: 921px) { .ast-below-header-bar, .ast-below-header-bar .site-below-header-wrap { min-height: 64px; } .site-branding .site-logo-img .custom-logo { height: 38px; } } /* ------------------------------------------- 3c. de werkelijke oorzaak van de overflow De footercontainer `4f0ac4ef` (zelfde id in de NL- én de FR-footer) staat op `flex-direction: column` mét `flex-wrap: wrap`. Een kolom die mag wrappen, vult bij een begrensde hoogte extra KOLOMMEN naast elkaar — de container werd daardoor 3.510px breed. Gevolg op een telefoon: de layout-viewport rekte op tot 1.560px, Astra dacht dat het een desktop was en het mobiele menu opende niet. De hamburger reageerde nergens op. Voor een kolomcontainer is `nowrap` het juiste gedrag. Dit is bewust één regel op één element: geen herontwerp van de footer. */ .elementor-element-4f0ac4ef { flex-wrap: nowrap !important; width: auto !important; max-width: 100% !important; } /* ========================================================================== 6. Dropdown "Verkoophulp" -------------------------------------------------------------------------- De labels liepen buiten het witte paneel. Op de homepage was de dropdown maar 156px breed terwijl "Welke verkooproute past bij mij?" 196px tekst nodig had. Twee dingen opgelost: de labels zijn ingekort tot Regio-check / Verkooproute / Verkoopklaar / Complexe situatie / Documentencheck, en het paneel krijgt een fatsoenlijke minimumbreedte met echte padding. Geen kleinere letters. ========================================================================== */ /* -- Elementor-header (homepage en de andere canvas-pagina's) -- */ .elementor-nav-menu--main .elementor-nav-menu--dropdown, .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu { min-width: 15rem; max-width: 20rem; padding: .5rem 0; border-radius: .55rem; box-shadow: 0 12px 32px -12px rgba(8, 53, 53, .38), 0 2px 6px rgba(8, 53, 53, .06); border: 1px solid rgba(8, 53, 53, .08); overflow: hidden; } .elementor-nav-menu--main .elementor-nav-menu--dropdown a.elementor-sub-item, .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a { display: block; padding: .68rem 1.15rem; line-height: 1.35; white-space: normal; overflow-wrap: break-word; } /* -- Astra-header (alle overige pagina's) -- */ .ast-below-header-bar .main-header-menu .sub-menu, .ast-primary-header-bar .main-header-menu .sub-menu { min-width: 15rem; width: auto; padding: .5rem 0; border-radius: .55rem; box-shadow: 0 12px 32px -12px rgba(8, 53, 53, .38), 0 2px 6px rgba(8, 53, 53, .06); border: 1px solid rgba(8, 53, 53, .08); } .ast-below-header-bar .main-header-menu .sub-menu .menu-link, .ast-primary-header-bar .main-header-menu .sub-menu .menu-link { padding: .68rem 1.15rem; line-height: 1.35; white-space: normal; overflow-wrap: break-word; height: auto; } /* Hover en toetsenbord krijgen dezelfde, duidelijke behandeling. */ .ast-below-header-bar .main-header-menu .sub-menu .menu-link:hover, .ast-below-header-bar .main-header-menu .sub-menu .menu-link:focus-visible, .elementor-nav-menu--main .elementor-nav-menu--dropdown a:hover, .elementor-nav-menu--main .elementor-nav-menu--dropdown a:focus-visible { background-color: rgba(109, 194, 188, .16); color: #083535; } .ast-below-header-bar .main-header-menu .sub-menu .menu-link:focus-visible, .elementor-nav-menu--main .elementor-nav-menu--dropdown a:focus-visible { outline: 2px solid #2E8F87; outline-offset: -2px; } /* Het huidige item in het submenu mag herkenbaar zijn. */ .ast-below-header-bar .main-header-menu .sub-menu .current-menu-item > .menu-link { color: #083535; font-weight: 600; box-shadow: inset 3px 0 0 #6DC2BC; } /* ========================================================================== 7. Taalwissel als secundair element -------------------------------------------------------------------------- "Français" stond als volwaardig navigatie-item naast Werkwijze en Vragen en nam daarmee evenveel visueel gewicht én ruimte in. De functie blijft volledig intact — vendufacile.be bestaat, dus de wissel moet blijven — maar hij wordt een compacte utility-knop in plaats van een primair menu-item. De vlag is eruit: een vlag staat voor een land, niet voor een taal, en de Belgische vlag dekt er drie. Het woord "Français" blijft staan, want dat is voor een Franstalige bezoeker het duidelijkste signaal — duidelijker dan "FR" alleen. ========================================================================== */ .main-header-menu > .lang-item > .menu-link, .elementor-nav-menu--main .elementor-nav-menu > .lang-item > a.elementor-item { font-size: .82rem; font-weight: 600; letter-spacing: .02em; padding: .34em .78em; border: 1px solid currentColor; border-radius: 999px; opacity: .72; line-height: 1.5; transition: opacity .15s ease, background-color .15s ease; } .main-header-menu > .lang-item > .menu-link:hover, .main-header-menu > .lang-item > .menu-link:focus-visible, .elementor-nav-menu--main .elementor-nav-menu > .lang-item > a.elementor-item:hover, .elementor-nav-menu--main .elementor-nav-menu > .lang-item > a.elementor-item:focus-visible { opacity: 1; background-color: rgba(109, 194, 188, .16); } /* Astra tekent standaard een onderstreping/hoogte op menu-items; die hoort niet bij een pill. */ .ast-below-header-bar .main-header-menu > .lang-item > .menu-link { height: auto; align-self: center; } .main-header-menu > .lang-item, .elementor-nav-menu--main .elementor-nav-menu > .lang-item { display: flex; align-items: center; } /* Vlagafbeeldingen van Polylang, mochten ze ergens nog terugkomen. */ .lang-item img.iclflag, .lang-item .lang-flag { display: none; } /* ========================================================================== 8. De mobiele header hoorde er ook bij -------------------------------------------------------------------------- De merkkleur was alleen op de desktoprij (`ast-below-header-bar`) gezet. De mobiele header gebruikt een andere rij (`ast-primary-header-bar`) en bleef dus licht. Dat viel extra op omdat het logo wit is: op een witte balk verdwenen de letters "Vlot" en de huisomtrek volledig en bleef alleen het teal-groene deel ("€ weg") zichtbaar. Het logo léék half stuk, maar was gewoon onzichtbaar. ========================================================================== */ @media (max-width: 921px) { body:not(.ast-theme-transparent-header) .ast-mobile-header-wrap .ast-primary-header-bar, body:not(.ast-theme-transparent-header) .ast-mobile-header-wrap .main-header-bar { background-color: #083535; } /* Hamburger en het uitklapmenu volgen dezelfde kleurstelling. */ body:not(.ast-theme-transparent-header) .ast-mobile-header-wrap .menu-toggle, body:not(.ast-theme-transparent-header) .ast-mobile-header-wrap .menu-toggle .ahfb-svg-iconset svg { color: #ffffff; fill: #ffffff; } .ast-mobile-header-content .main-header-menu, .ast-mobile-header-content { background-color: #083535; } .ast-mobile-header-content .menu-link, .ast-mobile-header-content .ast-menu-toggle { color: #ffffff !important; border-color: rgba(255, 255, 255, .12); } .ast-mobile-header-content .menu-item:hover > .menu-link, .ast-mobile-header-content .current-menu-item > .menu-link { color: #6bc290 !important; } /* Iets meer hoogte zodat het logo ademruimte houdt. */ .ast-mobile-header-wrap .ast-primary-header-bar { min-height: 68px; } .site-branding .site-logo-img .custom-logo { height: 40px; } } /* ------------------------------------------------- 4. smalle desktopband 922–1100 px Toegevoegd 2026-09-05 (growth sprint, fase 2). De hoofdnavigatie kreeg er een item bij: "Huis verkopen" met de zeven contenthubs eronder, in plaats van "Over ons" met drie ankers naar dezelfde pagina. Gemeten met de echte DM Sans-metriek, gekalibreerd op de meting uit Fase 7 (vier items = 491 px): de nieuwe rij is 512 px, dus 21 px breder. Boven 1100 px is dat geen probleem — de headercontainer is daar op 1200 px gezet en er is 679 px vrij tussen logo en telefoonnummer. Onder 1200 px verdwijnt het telefoonnummer (zie §14 van PROJECT-KNOWLEDGE) en wordt de container vloeiend. In de band tussen Astra's mobiele breekpunt (922 px) en ongeveer 1100 px is de ruimte krap: bij 960 px komt de nieuwe rij ~22 px tekort, terwijl de oude rij daar al op 1 px marge stond. Astra zet `padding: 0 1em` op elke top-level menu-link. In deze band gaat dat naar 0,6em. Dat scheelt ongeveer 26 px per item en dus ruim 100 px over vier items, terwijl er nog 19 px klikruimte per kant overblijft. Buiten deze band verandert er niets. Terugdraaien: verwijder dit bestand; de loader kiest dan weer header-1.0.6.css. */ @media (min-width: 1024px) and (max-width: 1100px) { .ast-below-header-bar .main-header-menu.ast-nav-menu > .menu-item > .menu-link, .ast-primary-header-bar .main-header-menu.ast-nav-menu > .menu-item > .menu-link, .elementor-nav-menu--main .elementor-nav-menu:not(.sm-vertical) > li > a.elementor-item { padding-left: 0.6em; padding-right: 0.6em; } } /* Onderaan de band is het krapper: daar staat naast het menu nog de CTA-knop en de taalwissel, terwijl de container al vloeiend is. Bij 930 px kwam de OUDE rij van vier items 31 px tekort; met 0,45em blijft de nieuwe rij daar ruim 15 px onder de beschikbare breedte. Er blijft 14 px klikruimte per kant. */ @media (min-width: 922px) and (max-width: 1023px) { .ast-below-header-bar .main-header-menu.ast-nav-menu > .menu-item > .menu-link, .ast-primary-header-bar .main-header-menu.ast-nav-menu > .menu-item > .menu-link, .elementor-nav-menu--main .elementor-nav-menu:not(.sm-vertical) > li > a.elementor-item { padding-left: 0.4em; padding-right: 0.4em; } } /* ============================================================ 8. de taalschakelaar "Français" stond als volwaardig item in de hoofdnavigatie. Dat is geen onderwerp maar een instelling, en het kostte precies de breedte die "Over ons" nodig had. De schakelaar staat nu in de utility-zone rechts, naast het telefoonnummer: een globe met de taalcode ernaast. Bewust geen vlag. Frans is een taal, geen land; een Belgische driekleur zou hier niets betekenen en een Franse zou onjuist zijn. BREEDTE, BEREKEND. Met de echte DM Sans-metriek, gekalibreerd op de meting van vorige sprint (vier items = 491 px gemeten, 484 px berekend, dus het model onderschat met 1,4%; er is 2% marge bijgeteld): viewport vrij menu 5 items schakelaar over 1440 px 679 467 px 46 px +166 1100 px 630 467 px 46 px +117 1024 px 554 467 px 46 px +41 960 px 490 434 px 46 px +10 (bij 0,4em) 922 px 452 434 px 46 px -28 -> schakelaar hier verborgen: +18 Onder 1024 px wordt de schakelaar daarom verborgen. Hij blijft bereikbaar: de footer draagt op elke pagina een taallink, en onder 922 px neemt het mobiele menu het over. Dat is de afweging: liever de taalknop uit die smalle band dan "Over ons" uit de navigatie. */ .vw-taal { display: inline-flex; align-items: center; gap: .3em; font-size: .82rem; font-weight: 600; letter-spacing: .02em; line-height: 1; padding: .35em .5em; margin-left: .35rem; border-radius: 3px; text-decoration: none; color: inherit; opacity: .78; transition: opacity .14s ease, background-color .14s ease; } .vw-taal svg { width: 1em; height: 1em; display: block; } .vw-taal:hover, .vw-taal:focus { opacity: 1; text-decoration: none; } .vw-taal:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* Zichtbaar tot en met 960 px. De berekening hierboven geeft bij 960 px nog +10 px over met de 0,4em-padding; bij 922 px komt de rij 28 px tekort. Tussen 922 en 959 px is de schakelaar daarom verborgen en neemt de taallink in de footer het over; onder 922 px schakelt Astra naar de mobiele header, waar "Français" / "Nederlands" als eigen menu-item staat. Dit is de afweging uit de opdracht: liever de schakelaar even weg dan een tweede regel — en "Over ons" blijft in alle gevallen staan. */ @media (max-width: 959px) { .vw-taal { display: none; } } /* --------------------------------------------------------------- de canvas-pagina's De vijf `elementor_canvas`-pagina's hebben hun header ín de pagina. De actiezone daar is een Elementor-flexrij (`--flex-direction: row`, `--justify-content: flex-end`) met twee knoppen: het telefoonnummer en "Maak een afspraak". De schakelaar hing eerst aan de nav-menu-widget. Elementor zet filteruitvoer BINNEN `.elementor-widget-container`, en dat is een blok: de schakelaar belandde als losse regel ONDER de navigatie, links uitgelijnd onder het eerste menu-item. Hij hangt nu aan de telefoonknop, en `.vw-utility` zet die twee naast elkaar. Volgorde in de rij wordt daardoor telefoon · FR · Maak een afspraak. `.vw-taal-canvas` blijft gedefinieerd voor het geval de oude wikkel ergens nog uit een cache komt; hij doet hetzelfde. */ .vw-utility { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: nowrap; white-space: nowrap; color: inherit; } .vw-utility > .elementor-button-wrapper { display: inline-flex; } .vw-taal-canvas { display: inline-flex; align-items: center; color: inherit; } @media (min-width: 960px) { .vw-taal-canvas { margin-left: .4rem; } } /* --------------------------------------------------------------- de Astra-pagina's Daar staan telefoon en schakelaar samen in het HTML-blok van de header-builder. Dat blok is een `
`; zonder deze regel kunnen de twee links bij krappe breedte over twee regels vallen. De rij zelf mag niet breken — de opdracht vraagt expliciet om geen regelbreuk. */ .ast-header-html-1 .ast-builder-html-element > p { display: flex; align-items: center; gap: .1rem; flex-wrap: nowrap; white-space: nowrap; margin: 0; }