/* ============================================================ CHA CHI VERSACI — mobiel Drie dingen, en ze horen bij elkaar omdat ze allemaal over de breedte van het scherm gaan. WAT ER MIS WAS Gemeten op een viewport van 495px: de kolommen van Elementor stapelden niet. Een sectie met drie kolommen zag er zo uit: kolom 375px (3 x 375 = 1125px) .elementor-container 485px overflow-x: auto section 495px De container is dus smaller dan zijn inhoud en scrolt horizontaal, maar zonder dat je dat ziet. Gevolg: tekst, knoppen en kaarten werden rechts afgekapt. Ook secties met twee kolommen deden dat. De kolommen kunnen niet krimpen onder hun min-content breedte, en de container heeft flex-wrap:nowrap. Daarom hieronder allebei: laten teruglopen, en de kolommen op volle breedte. WAT HET NU DOET 1. De 10px die Elementor op elke kolom zet gaat er links en rechts af. Die is bedoeld voor kolommen die naast elkaar staan; op mobiel staan ze onder elkaar en houdt hij de inhoud alleen maar van de rand af. De marge van de sectie en de container blijft: die bepaalt de leesbreedte van de tekst. 2. Een sectie met drie kolommen of meer wordt een veegbare rij, met inklikken (scroll-snap) zodat je op een kaart uitkomt en niet er half tussenin. Twee kolommen stapelen gewoon. 3. Het menuknopje is een echte knop geworden in plaats van een grijs vierkantje. Breekpunt 767px is dat van Elementor zelf; het menu klapt al op tablet dicht en heeft daarom zijn eigen, ruimere grens. ============================================================ */ /* ============================================================ 1 · DE KOLOMMARGE VAN ELEMENTOR ============================================================ */ @media (max-width:767px){ /* De ACHTERGRONDEN tot de rand, de TEKST niet. Dat is het verschil tussen een website en een ingekaderd document. Een sectie is de laag die de kleur draagt; die mag over de volle breedte. De container erin draagt de inhoud; die houdt marge, want tekst die tegen de schermrand plakt leest niet. Dus: de sectie zelf krijgt geen marge meer en zijn boxed-breedte gaat eraf, maar de container houdt 18px aan weerszijden. Wat je dan ziet is een doorlopende kleurbaan met leesbare tekst erin. De 10px die Elementor op elke kolom zet gaat wel weg: die komt bovenop de 18px hieronder en is op mobiel enkel dubbelop. De header blijft erbuiten - die heeft zijn eigen indeling. */ /* 1. de kleurlaag: van rand tot rand */ .elementor:not(.elementor-location-header) .elementor-section{ padding-left:0 !important;padding-right:0 !important; margin-left:0 !important;margin-right:0 !important; } .elementor:not(.elementor-location-header) .elementor-section.elementor-section-boxed > .elementor-container{ max-width:100%; } /* 2. de inhoudslaag: houdt lucht */ .elementor:not(.elementor-location-header) .elementor-section > .elementor-container{ padding-left:18px;padding-right:18px; margin-left:0;margin-right:0; } /* ...behalve als de eigen blokken erin zitten. Die dragen hun eigen achtergrond en regelen hun marge zelf met een .wrap erbinnen. Zet je er hier ook nog 18px omheen, dan schuift die achtergrond mee naar binnen en houd je precies de witte rand over die weg moest. Gemeten op de voorpagina, waar de hele pagina één HTML-blok is: .elementor-container links 0 breed 495 pad 18px/18px .ccv-home.ccv-hero links 18 breed 459 <- de stippen begonnen hier :has(.wrap) is het signaal: dit blok doet zijn marge zelf. */ .elementor:not(.elementor-location-header) .elementor-section > .elementor-container:has(.wrap){ padding-left:0;padding-right:0; } .elementor:not(.elementor-location-header) .elementor-column > .elementor-element-populated{ padding-left:0 !important;padding-right:0 !important; } /* En de kolom zelf, want daar zit de echte rand. In de Customizer-CSS staat, achter een eigen breekpunt: @media (max-width:480px){ .elementor-column{padding:10px !important} } Tien pixels rondom élke kolom. Op de voorpagina staat de hele pagina in één kolom, dus dat is een lijst van 10px om alles heen - achtergronden incluis. Precies de witte rand die bleef terugkomen. Twee redenen waarom hij zo lang onvindbaar bleef. Hij zit een laag hoger dan de regel hierboven: die nulde .elementor-element-populated, de wrap bínnen de kolom, en niet de kolom. En hij springt pas aan onder 480px, terwijl headless Chrome zijn venster op 500px klemt - al mijn metingen vielen er net buiten. Verslaan vraagt hier meer dan !important alleen: de Customizer-CSS wordt na alle stylesheets afgedrukt, dus bij gelijk gewicht wint hij op volgorde. Vandaar de drie klassen hier tegen zijn ene. */ .elementor:not(.elementor-location-header) .elementor-column{ padding-left:0 !important;padding-right:0 !important; } /* En hetzelfde voor de eigen blokken: 26px is op een telefoon te veel, maar nul is te weinig. */ .ccv-hero .wrap, .ccv-home .wrap, .ccv-contact .wrap, .ccv-boek .wrap, .ccv-boek-slot .wrap, .ccv-boeken .wrap, .ccv-indeling .wrap, .ccv-omgeving .wrap, .ccv-praktischspanje .wrap, .ccv-cijfers .wrap, .ccv-choco .wrap, .ccv-tour .wrap, .ccv-show .wrap, .ccv-praktisch .wrap, .ccv-footer-socials .wrap, .ccv-footer-nieuwsbrief .wrap{ padding-left:18px;padding-right:18px;max-width:100%; } /* Een lange URL of een woord zonder streepjes duwde de kaart breder dan het scherm. */ .ccv-hero, .ccv-contact, .elementor-widget-container{ overflow-wrap:anywhere; } /* Op een telefoon begint de pagina met het beeld, niet met de tekst. Op desktop staat de hero naast elkaar: tekst links, portret rechts. Dat leest van links naar rechts, dus dan is de tekst eerst. Op mobiel stapelen ze, en dan zou je bovenaan tegen een kop en vier regels tekst aankijken voordat er iets te zien is - je moet scrollen voordat de pagina iets laat zien. De volgorde komt van `order`, niet van de DOM. Zo hoeft de markup van geen enkele pagina verbouwd te worden en verandert desktop niet. Het geldt voor elke pagina die de hero gebruikt, en dat zijn ze allemaal. Het portret staat als tweede in .hero-grid; order:-1 tilt hem naar voren. Grid volgt dezelfde ordening als flex, dus dit werkt ook waar de hero-grid nog een raster is. */ .ccv-hero .hero-grid{ display:flex; flex-direction:column; } .ccv-hero .portrait-zone{ order:-1; } /* De golf onder de hero gaat op mobiel weg. Hij is 62px hoog en de svg staat op preserveAspectRatio="none", dus hij rekt mee met de breedte. Op een scherm van 1440px is dat een flauwe curve over de volle breedte; op 375px wordt diezelfde curve zo plat uitgerekt dat er een rechte balk van overblijft. En die balk heeft een kleur die nergens bij aansluit. Gemeten op de chocoladepagina op 375px: curve rgb(239,249,221) --bg-alt, pale groen hero erboven rgb(249,253,241) --bg, bijna wit Dus een strook die niet bij zijn bovenbuur hoort en niet bij zijn onderbuur - precies wat er als een streep uitziet. Weghalen kost geen ruimte. De golf hangt met margin-top:-62px over de hero heen en draagt dus netto niets bij aan de hoogte; wat je weghaalt is alleen de curve zelf. */ .ccv-hero .wave{ display:none; } /* Twee lettergroottes uit diezelfde oude Customizer-CSS terugdraaien. @media (max-width:767px){ p.elementor-heading-title.elementor-size-default{font-size:13px !important} } @media (max-width:480px){ .elementor-button{font-size:11px !important} } Dertien pixels voor een kop en elf voor een knop is kleiner dan de lopende tekst eromheen, en juist op een telefoon moet je die dingen kunnen lezen en raken. Het lijkt een poging om overloop te voorkomen; dat lost dit bestand nu op met terugloop en veegrijen, dus de tekst mag weer normaal. De selectors zijn zwaarder dan die van hen - drie klassen tegen twee en een element - want de Customizer-CSS wordt na alle stylesheets afgedrukt en wint anders op volgorde. */ .elementor p.elementor-heading-title.elementor-size-default{ font-size:16px !important; line-height:1.5 !important; } .elementor .elementor-button, .elementor .elementor-button-text{ font-size:15px !important; } } /* ============================================================ 2 · KOLOMMEN: STAPELEN, OF SLIDEN VANAF DRIE ============================================================ */ @media (max-width:767px){ /* Eerst het algemene geval: laten teruglopen en op volle breedte. Zonder flex-wrap blijft de rij naast elkaar staan en helpt een breedte van 100% niets. !important op de breedte, en dat is hier geen luiheid. Elementor zet de kolombreedte per element bij (.elementor-2198 .elementor-element.elementor-element-abc{width:33%}) en wint dat met gemak. Gemeten: mijn regel raakte de kolom wel - de scroll-snap eruit kwam door - maar flex-basis bleef 'auto' en de breedte 78px. Alleen de maatvoering krijgt dus voorrang; de rest van dit bestand heeft het niet nodig. */ /* Niet in de header. Die is ook van Elementor en heeft ook kolommen - logo, menu, knop - maar die horen juist naast elkaar te blijven. Zonder deze uitzondering stapelde de header en stond er op mobiel alleen nog een logo; het menuknopje en "Steun ons" waren weg. */ .elementor:not(.elementor-location-header) .elementor-container{ flex-wrap:wrap; overflow-x:visible; } .elementor:not(.elementor-location-header) .elementor-container > .elementor-column{ width:100% !important; max-width:100% !important; flex:0 0 100% !important; } /* Behalve als de sectie een veegrij IS. De twee regels hierboven kenden die uitzondering niet, en dat brak precies wat ze wilden repareren. Gemeten op /steentje-bijdragen/: .elementor-container display:flex flex-wrap:nowrap gap:14px overflow-x:VISIBLE .elementor-column flex:0 0 100% breedte 464px document.scrollWidth 1453px bij een viewport van 500px Drie kolommen van volle containerbreedte in een rij die niet terugloopt en niet scrolt: dan rekt het document mee en loopt de hele pagina buiten beeld. Niet alleen die sectie - alle secties erboven en eronder worden dan tot 1453px opgerekt, en daarom leek het of de hele pagina stuk was. Dat is dezelfde botsing als in de opmerking hieronder, maar met de rollen omgedraaid. Daar verloor het thema van de Customizer; hier wint het thema en sloopt het de slider. De reden is hetzelfde: thema .elementor .elementor-container > .elementor-column -> vier klassen, wint Customizer .ccv-slide > .elementor-container > .elementor-column -> drie klassen, verliest stil Deze regel telt er vijf en zet het slider-gedrag terug. Niet door de regels hierboven te verzwakken: die zijn er voor alle andere secties en doen daar hun werk. */ .elementor:not(.elementor-location-header) .ccv-slide > .elementor-container{ flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .elementor:not(.elementor-location-header) .ccv-slide > .elementor-container::-webkit-scrollbar{ display:none; } .elementor:not(.elementor-location-header) .ccv-slide > .elementor-container > .elementor-column{ width:82% !important; max-width:82% !important; flex:0 0 82% !important; scroll-snap-align:start; } /* HIER STOND EEN TWEEDE SLIDER, EN DIE IS ERUIT. De regel was: een sectie met drie kolommen of meer wordt vanzelf een veegrij, herkend met :has(> .elementor-column:nth-child(3)). Aardig bedacht, maar hij heeft nooit iets gedaan. In de Customizer-CSS staat namelijk al een compleet slider-systeem, en dat werkt andersom: niet raden, maar aanwijzen. Een sectie krijgt de klasse .ccv-slide en wordt dan een veegrij; al het andere stapelt. Dat staat daar zo: .ccv-slide > .elementor-container > .elementor-column{flex:0 0 82% !important} .elementor-section:not(.ccv-slide):not(.elementor-location-header *) :not(.elementor-location-footer *) > .elementor-container > .elementor-column{ flex:0 0 100% !important; scroll-snap-align:none !important } Die tweede selector telt zes klassen; de mijne vier. Bij twee keer !important wint het zwaarste, dus mijn regels stonden er wel maar verloren stil. In de DevTools van de site zag je ze doorgestreept. Aanwijzen is bovendien beter dan raden: niet elke sectie met drie kolommen hoort te vegen. .ccv-slide staat inmiddels op elf sjablonen, dus dat systeem is in gebruik en dit was dubbelop. Wat hieronder wel blijft staan zijn de eigen rasters (.ccv-home .cards en gelijken). Die zijn geen Elementor-kolommen en raken deze regels dus niet - die vegen gewoon. */ } /* ---------- de eigen rasters, zelfde behandeling ---------- */ @media (max-width:767px){ /* Alle eigen rasters die op desktop drie of meer naast elkaar zetten. Ze staan allemaal op repeat(auto-fit,minmax(...)) en klappen op mobiel vanzelf terug naar één kolom - en dan krijg je precies de stapel van zes kaarten waar je langs moet scrollen. Vandaar dat ze hier stuk voor stuk in de veegrij komen. */ .ccv-footer-socials .soc-grid, .ccv-cijfers-grid, .ccv-praktisch-grid, .ccv-hero .stats, .ccv-home .cards, .ccv-home .svc-grid, .ccv-home .media-grid, .ccv-home .soc-grid, .ccv-routes-grid, .ccv-boek-grid, .ccv-ruimtes, .ccv-omgeving-grid{ display:flex; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding-left:0;padding-right:0; margin-left:0;margin-right:0; scroll-padding-left:0; -webkit-overflow-scrolling:touch; scrollbar-width:none; max-width:none; } .ccv-footer-socials .soc-grid::-webkit-scrollbar, .ccv-cijfers-grid::-webkit-scrollbar, .ccv-praktisch-grid::-webkit-scrollbar, .ccv-hero .stats::-webkit-scrollbar, .ccv-home .cards::-webkit-scrollbar, .ccv-home .svc-grid::-webkit-scrollbar, .ccv-home .media-grid::-webkit-scrollbar, .ccv-home .soc-grid::-webkit-scrollbar, .ccv-routes-grid::-webkit-scrollbar, .ccv-boek-grid::-webkit-scrollbar, .ccv-ruimtes::-webkit-scrollbar, .ccv-omgeving-grid::-webkit-scrollbar{display:none} /* Inklikken tegen de LINKERrand, niet in het midden. Met center staat de actieve kaart precies in het midden, en omdat hij 68% breed is blijft er links en rechts 16% over - gevuld met de buren, half afgesneden. Je ziet dan nooit een rij kaarten maar altijd anderhalve, en dat leest als kapot in plaats van als veegbaar. Met start klikt de kaart tegen de rand en is wat je rechts ziet het begin van de volgende. Dat is juist de aanwijzing dat er meer staat. De ::after eronder is de staart. Zonder die is er bij de laatste kaart niet genoeg te scrollen om hem naar links te trekken, en blijft de rij op zijn eind alsnog met een halve kaart staan. De staart is precies de restbreedte: 100% min de kaart. */ .ccv-footer-socials .soc-grid > *, .ccv-cijfers-grid > *, .ccv-praktisch-grid > *, .ccv-home .cards > *, .ccv-home .svc-grid > *, .ccv-home .media-grid > *, .ccv-home .soc-grid > *, .ccv-routes-grid > *, .ccv-boek-grid > *, .ccv-ruimtes > *, .ccv-omgeving-grid > *{ flex:0 0 68%;scroll-snap-align:start; } .ccv-cijfers-grid::after, .ccv-praktisch-grid::after, .ccv-home .cards::after, .ccv-home .svc-grid::after, .ccv-home .media-grid::after, .ccv-home .soc-grid::after, .ccv-routes-grid::after, .ccv-boek-grid::after, .ccv-ruimtes::after, .ccv-omgeving-grid::after{ content:"";flex:0 0 32%; } /* De drie kerngetallen zijn kort; daar passen er twee naast elkaar en hoef je maar één keer te vegen. */ .ccv-hero .stats > *{ flex:0 0 44%;scroll-snap-align:start; } .ccv-hero .stats::after{content:"";flex:0 0 56%} /* De socialkaarten zijn smal - vier op een scherm is prima. */ .ccv-footer-socials .soc-grid > *{flex:0 0 40%} .ccv-footer-socials .soc-grid::after{content:"";flex:0 0 60%} /* Tellerrijen in een veegrij: smaller dan kaarten. .ccv-slide zet elke kolom op 82%. Dat klopt voor een kaart met een kop en een alinea, maar niet voor een teller: daar staat per kolom niet meer dan een getal en een woord. Op 82% zie je er één tegelijk en veeg je drie keer voor drie getallen die samen nog geen halve regel tekst zijn. Op 46% passen er twee naast elkaar en is één veeg genoeg voor de derde. Precies de afweging die hierboven al voor .ccv-hero .stats is gemaakt. Aangewezen op inhoud in plaats van op sectie-id: elke veegrij die tellers bevat krijgt dit, en secties met icon-boxen niet. Dat scheelt een regel per pagina - het speelt nu in de footer (27335aa7) en op /steentje-bijdragen/ (3d3b2374), en de volgende die erbij komt hoeft niet opnieuw te worden opgezocht. De keten loopt met > omdat :has() anders ook aanslaat op een sectie die ergens diep een teller heeft staan, en die hoort niet smaller te worden. Vijf klassen. De Customizer-regel die de 82% zet telt er drie en staat later in de pagina; bij gelijkspel zou die winnen, dus specificiteit is hier het verschil tussen werken en stil verliezen. */ .ccv-slide:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-counter) > .elementor-container > .elementor-column{ flex:0 0 46% !important; width:46% !important; max-width:46% !important; /* minder lucht: 24px links en rechts is voor een kaart, niet voor een getal van vier tekens */ padding:8px 6px !important; } /* De staart: zonder deze is er bij de laatste kolom niet genoeg te scrollen om hem naar links te trekken. */ .ccv-slide:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-counter) > .elementor-container::after{content:"";flex:0 0 54%} } /* ============================================================ 3 · HET MENU ============================================================ */ /* ---------- de indeling van de header op mobiel ---------- De header is uitgezonderd van het stapelen hierboven, want logo, menu en knop horen naast elkaar. Maar zonder verdere maatregel houden die kolommen hun desktopbreedtes (56% / 22% / 22%), en dan schuift het menu links het scherm uit. Dus hier een eigen indeling: menu links, logo in het midden, de steunknop rechts. Het logo krijgt de ruimte die overblijft, en dat is precies de bedoeling - dat is het merk. De volgorde komt van `order`, niet van de DOM: zo hoeft het headersjabloon niet verbouwd te worden en blijft desktop zoals hij is. */ @media (max-width:1024px){ /* De boxed breedte moet hier ook weg, anders staan de drie in een smalle kolom in het midden gepropt met wit ernaast - dat was precies de klacht. Nu de volle breedte, met alleen 14px lucht aan de randen. */ .elementor-location-header .elementor-section.elementor-section-boxed > .elementor-container{ max-width:100% !important; } /* Een raster van 1fr auto 1fr, geen flexrij. Met flex hangt het midden af van hoe breed de twee buitenste items zijn: is het menuknopje een pixel breder dan het hartje, dan staat het logo scheef. Met 1fr auto 1fr is de middelste kolom altijd precies gecentreerd, wat er links en rechts ook staat. */ .elementor-location-header .elementor-section > .elementor-container{ display:grid !important; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; padding-left:14px;padding-right:14px; width:100%; } .elementor-location-header .elementor-column{ width:auto !important; max-width:none !important; } /* Het menu: eerst, en niet breder dan het knopje zelf. Op desktop is deze kolom 56% breed; daar komt de overloop vandaan. */ .elementor-location-header .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-n-menu), .elementor-location-header .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-nav-menu){ order:1;justify-self:start; } /* Het logo: in het midden, en het krijgt wat overblijft. Let op de selector: het logo is een html-widget, geen image- of site-logo-widget. Daarom greep :has(.elementor-widget-image) niet en bleef de volgorde staan zoals hij was. In het sjabloon (1204) is de opbouw: kolom 20% met html (logo), kolom 56% met nav-menu, kolom 19% met de knop. */ .elementor-location-header .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-html){ order:2;justify-self:center; text-align:center; } /* Het logo mag groot nu de knop alleen nog een hartje is: dat scheelt de breedte die "Steun ons" kostte. De breedte is de rem niet - het logo is 420x280, dus op 76px hoog is het 114px breed, en tussen twee knoppen van 46px in een scherm van 360px blijft er ruim 200px over. De hoogte van de balk bepaalt het, en die groeit gewoon mee. */ .elementor-location-header .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-html) > .elementor-widget-wrap > .elementor-widget-html img{ max-height:76px;width:auto;margin:0 auto;display:block; } /* De balk mag daarvoor iets ruimer; anders plakt het logo tegen de rand van de header. */ .elementor-location-header .elementor-section > .elementor-container{ padding-top:8px;padding-bottom:8px; } /* De steunknop: rechts, en alleen het hartje - de tekst kost de breedte die het logo beter kan gebruiken. */ .elementor-location-header .elementor-column:has(.elementor-widget-button){ order:3;justify-self:end; } .elementor-location-header .elementor-widget-button .elementor-button{ padding:0 !important; width:46px;height:46px; border-radius:50% !important; display:inline-flex;align-items:center;justify-content:center; } .elementor-location-header .elementor-widget-button .elementor-button-text{ display:none; } .elementor-location-header .elementor-widget-button .elementor-button-icon{ margin:0 !important;font-size:18px; } } /* Elementor klapt het menu al op tablet dicht (nav-menu--dropdown- tablet), dus deze grens ligt hoger dan de 767px hierboven. */ @media (max-width:1024px){ /* Het knopje was een grijs vierkantje met een streepjes-icoon: op een lichte header nauwelijks te zien, en te klein om goed te raken. Nu een knop in de kleur van de site, 46px hoog - de maat waarop een duim betrouwbaar mikt. */ .elementor-menu-toggle{ width:auto;min-width:46px;height:46px; padding:0 14px; border-radius:var(--r-pill); background:var(--accent) !important; color:var(--on-accent) !important; box-shadow:0 4px 0 var(--accent-deep); border:0; display:inline-flex;align-items:center;justify-content:center; transition:transform .2s cubic-bezier(.2,.9,.3,1.4),box-shadow .2s ease; } .elementor-menu-toggle:hover, .elementor-menu-toggle:focus{ background:var(--accent-bright) !important; color:var(--on-accent) !important; } .elementor-menu-toggle:active{ transform:translateY(3px);box-shadow:0 1px 0 var(--accent-deep); } .elementor-menu-toggle:focus-visible{ outline:3px solid var(--pop);outline-offset:3px; } .elementor-menu-toggle i, .elementor-menu-toggle svg{ font-size:22px;width:22px;height:22px;color:inherit;fill:currentColor; } /* Het woord "Menu" erbij: een pictogram alleen wordt gemist, en hier is ruimte genoeg. */ .elementor-menu-toggle .elementor-screen-only{ position:static !important; width:auto !important;height:auto !important; clip:auto !important;clip-path:none !important; overflow:visible !important; margin-left:8px; font-family:'Fredoka',sans-serif;font-size:14px;font-weight:600; letter-spacing:.02em; } /* Het uitklapmenu moet over de volle breedte van de header vallen. Twee dingen hielden dat tegen. Het eerste is de indeling. Elementor hangt het paneel absoluut op, en een absoluut element rekent zijn breedte tegen de dichtstbijzijnde voorouder die zelf gepositioneerd is. Gemeten op 500px was dat deze keten: nav.--dropdown absolute breed 50 links 19 div.elementor-widget-container static 50 div.elementor-element-6737cd40 RELATIVE 50 <- het ankerpunt div.elementor-widget-wrap RELATIVE 50 div.elementor-column static 50 div.elementor-container RELATIVE 485 section.elementor-section sticky 495 Elementor zet position:relative op de widget en op de widget-wrap. Alleen de kolom statisch maken was dus niet genoeg - het ankerpunt zat een laag lager en bleef 50px breed. Het gevolg: left, right, top en margin grepen wel, maar width:100% rekende tegen 50px en leverde precies de smalle strook op. Daarom gaat hieronder de hele tussenlaag op static: container, kolom, wrap en widget. Dan is de sectie het ankerpunt, en die is 495px - de volle breedte van de balk. Het tweede staat niet in dit bestand maar in de Customizer-CSS (post 457), nog uit de tijd dat het menu rechts in de header zat: nav.elementor-nav-menu--dropdown.elementor-nav-menu__container{ position:absolute; margin-left:-255px; top:26px; width:300px } Toen klopte dat - het paneel moest naar links onder de knop vandaan. Nu het menu links staat trekt diezelfde -255px het beeld uit, en 300px is geen volle breedte meer. Die selector weegt met element + twee klassen zwaarder dan de mijne, dus hier is !important geen luiheid maar het enige wat wint. Weegt die regel ooit uit de database, dan mag dit mee. Let op de selector: --dropdown erbij. De klasse elementor-nav-menu__container zit óók op de gewone horizontale nav; die staat op mobiel op display:none, maar hem absoluut positioneren is alsnog nergens goed voor. */ .elementor-location-header .elementor-section{ position:relative; } .elementor-location-header .elementor-section > .elementor-container, .elementor-location-header .elementor-column, .elementor-location-header .elementor-widget-wrap, .elementor-location-header .elementor-widget-nav-menu{ position:static; } .elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container{ position:absolute !important; left:0 !important;right:0 !important; width:100% !important; top:100% !important; margin:0 !important; } /* Het uitklapmenu zelf. Stond als een smalle strook met kleine regels; nu volle breedte met regels waar je op kunt mikken. */ .elementor-nav-menu--dropdown{ background:var(--card) !important; border-radius:0 0 var(--r-lg) var(--r-lg); box-shadow:var(--shadow); border-top:3px solid var(--accent); max-height:80vh;overflow-y:auto; } .elementor-nav-menu--dropdown a{ font-family:'Fredoka',sans-serif !important; font-size:17px !important;font-weight:500 !important; color:var(--ink) !important; padding:15px 20px !important; border-bottom:1px solid var(--border); } .elementor-nav-menu--dropdown a:hover, .elementor-nav-menu--dropdown a.elementor-item-active{ background:var(--pill) !important; color:var(--accent-deep) !important; } /* Een submenu hoort zichtbaar onder zijn hoofditem te horen. */ .elementor-nav-menu--dropdown .sub-menu a{ font-size:15px !important; padding-left:38px !important; color:var(--text) !important; } .elementor-nav-menu--dropdown .sub-menu{ background:var(--bg-alt) !important; } /* Het pijltje bij een item met submenu groot genoeg om te raken. */ .elementor-nav-menu--dropdown .elementor-nav-menu--dropdown-tablet .sub-arrow, .elementor-nav-menu--dropdown .sub-arrow{ padding:10px !important; } }