/* ========================================================================== MM · SCHWEBENDE KOPFZEILE -------------------------------------------------------------------------- Beim Scrollen zieht sich die Kopfzeile zu einer abgerundeten Leiste zusammen, die ueber dem Inhalt schwebt. Oben und an den Seiten bleibt Luft, durch die man die Seite darunter vorbeilaufen sieht. WAS HIER BEWUSST NICHT PASSIERT Die Kopfzeile klebt schon von sich aus oben - sie steht auf position:sticky. Diese Datei aendert daran nichts. Kein Herausnehmen aus dem Textfluss, kein Platzhalter. Es aendert sich nur das Aussehen, sobald die Seite gescrollt ist. Dadurch kann hier auch nichts springen. WELCHES ELEMENT DIE PILLE IST Nicht der aeussere Container. Der laeuft bei Elementor immer ueber die volle Fensterbreite; begrenzt wird der innere (.e-con-inner) ueber --content-width. Die Leiste ist deshalb der innere. DIE FLAECHE Halbdurchsichtig plus Unschaerfe. Ohne Unschaerfe waere der Text ueber vorbeiziehendem Inhalt nicht lesbar, ohne Durchsichtigkeit saehe man nichts vorbeilaufen. Beides laeuft nur, solange gescrollt ist. ABSCHALTEN In functions.php MM_STICKY auf false setzen. Dann bleibt die Kopfzeile in jeder Scroll-Position so, wie sie heute ist. ========================================================================== */ /* -------------------------------------------------------------------------- 0 · Die Kopfzeile klebt - und zwar von hier aus -------------------------------------------------------------------------- Bis zum 19.08. stand das in einem eigenen CSS-Snippet ("Header: Sticky mit Scroll-Effekt"), zusammen mit einem zweiten Scroll-Effekt: einem Streifen ueber die volle Breite. Zwei Effekte fuer dieselbe Sache waren einer zu viel. Der Streifen ist weg, das Kleben ist hierher gezogen - dorthin, wo auch die Leiste beschrieben ist. Warum !important: Elementor setzt auf demselben Element eigene Werte fuer position und top. Ohne gleiches Gewicht gewinnt Elementor. -------------------------------------------------------------------------- */ header.elementor-location-header{ position:-webkit-sticky !important; position:sticky !important; top:0 !important; z-index:9999 !important; background-color:transparent !important; box-shadow:none !important; /* Ohne das verankert der Browser beim Nachladen an der Kopfzeile und die Seite springt. Stand so schon im Snippet. */ overflow-anchor:none !important; } /* Das Wortzeichen. Kam ebenfalls aus dem Snippet - ohne diese Breite faellt es auf seine natuerliche Groesse von 345px zurueck. Am Telefon setzt ein anderes Snippet 42px mit !important; das bleibt unberuehrt. */ header.elementor-location-header .elementor-widget-image img{ width:142px; max-width:142px; transform-origin:left center; } :root{ --mm-sticky-luft: 10px; /* Abstand nach oben */ --mm-sticky-rand: 40px; /* Luft zu den Seiten */ /* Deutlich schmaler als die Inhaltsspalte (1140px). 1080 reichte nicht: davon lagen nur 30px je Seite ueber dem Inhalt, und das ist genau der aeussere Rand der Spalte - also leere Flaeche. Erst ab rund 900 schieben sich die aeusseren Kacheln sichtbar hinter die Leiste. Untergrenze ist der Inhalt der Leiste selbst: Logo 152 + Menue 566 + Avatar 70 + Polster 52 = 840. */ --mm-sticky-breite: 900px; --mm-sticky-radius: 999px; --mm-sticky-logo: 38px; /* Logohoehe in der Leiste */ --mm-sticky-t: 340ms; } /* -------------------------------------------------------------------------- 1 · Der Uebergang - liegt immer an, damit es in beide Richtungen laeuft -------------------------------------------------------------------------- */ header.elementor-location-header .elementor-widget-image img{ transition:max-height var(--mm-sticky-t) var(--mm-ease); } header.elementor-location-header .e-con-inner{ border:1px solid transparent; border-radius:0; transition:max-width var(--mm-sticky-t) var(--mm-ease), padding var(--mm-sticky-t) var(--mm-ease), border-radius var(--mm-sticky-t) var(--mm-ease), background-color var(--mm-sticky-t) var(--mm-ease), box-shadow var(--mm-sticky-t) var(--mm-ease), border-color var(--mm-sticky-t) var(--mm-ease); } /* -------------------------------------------------------------------------- 2 · Der gescrollte Zustand -------------------------------------------------------------------------- */ body.mm-sticky-an header.elementor-location-header .e-con-inner{ max-width:min(var(--mm-sticky-breite), calc(100vw - 2 * var(--mm-sticky-rand))); margin-inline:auto; margin-top:var(--mm-sticky-luft); padding:8px 26px; border-radius:var(--mm-sticky-radius); /* .72 war zu wenig: ueber dem dunklen Video-Abschnitt wurde die Pille grau und die Schrift darauf schwer lesbar. .86 bleibt hell genug und laesst trotzdem erkennen, was darunter liegt. */ background-color:rgba(250,250,247,.86); -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); border-color:rgba(255,255,255,.6); box-shadow:0 2px 6px rgba(57,52,52,.05), 0 14px 40px rgba(57,52,52,.10); } /* Die drei Spalten der Kopfzeile bringen je 10px Polster oben und unten mit. In der Leiste ist das zu viel - ohne sie waere die Pille 100px hoch statt 80. */ body.mm-sticky-an header.elementor-location-header .e-con-inner > .e-con{ padding-block:0; } /* Das Logo rueckt mit zusammen. Ohne diese Zeile bliebe die Leiste so hoch wie vorher - das Bild ist das hoechste Element in der Kopfzeile. */ body.mm-sticky-an header.elementor-location-header .elementor-widget-image img{ /* Ein eigenes CSS-Snippet setzt hier width:142px. Eine reine max-height laesst das Bild dann auf 0 zusammenfallen - es war deshalb in der Leiste gar nicht mehr zu sehen. Feste Hoehe plus width:auto loest das, max-width und max-height muessen dafuer ausdruecklich frei sein. */ height:var(--mm-sticky-logo) !important; width:auto !important; max-width:none !important; max-height:none !important; } /* -------------------------------------------------------------------------- 3 · Telefon - schmalerer Rand, sonst bleibt von der Leiste nichts uebrig -------------------------------------------------------------------------- */ @media (max-width:767px){ :root{ --mm-sticky-rand:18px; /* auch am Telefon soll seitlich Seite durchscheinen */ --mm-sticky-luft:8px; --mm-sticky-logo:30px; } body.mm-sticky-an header.elementor-location-header .e-con-inner{ padding:6px 14px; /* Unschaerfe kostet auf dem Telefon am meisten und bringt dort am wenigsten - die Leiste ist ohnehin fast so breit wie der Schirm. */ -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%); background-color:rgba(250,250,247,.88); } } @media (prefers-reduced-motion: reduce){ header.elementor-location-header .e-con-inner, header.elementor-location-header .elementor-widget-image img{ transition-duration:1ms; } } /* -------------------------------------------------------------------------- 4 · Angemeldete Ansicht -------------------------------------------------------------------------- Der WordPress-Balken liegt fest ueber allem. Die Kopfzeile klebt bei top:0 und verschwindet als schmale Leiste darunter. Fuer Besucher ohne Anmeldung aendert sich dadurch nichts. -------------------------------------------------------------------------- */ body.admin-bar header.elementor-location-header{ /* Elementor setzt top:0 mit !important. Ohne dasselbe Gewicht rutscht die Leiste unter den WordPress-Balken und wird oben abgeschnitten. */ top:32px !important; } @media screen and (max-width:782px){ body.admin-bar header.elementor-location-header{ top:46px !important; } } /* -------------------------------------------------------------------------- 5 · DIE LEISTE, DIE WIEDERKOMMT - am Telefon (Vorschlag A, Abschnitt 19d) -------------------------------------------------------------------------- Am Schreibtisch zieht sich die Kopfzeile beim Scrollen zu einer schwebenden Pille zusammen - das macht diese Datei weiter oben. Am Telefon war davon bisher nichts zu sehen, aus einem einzigen Grund: DIE URSACHE Ein Snippet der Seite setzt unter 768px html,body{overflow-x:hidden}. Das haelt zwar den waagerechten Ueberlauf zurueck, macht html und body aber zu eigenen Scroll-Behaeltern - und damit verliert position:sticky seinen Bezugspunkt. Die Kopfzeile scrollt einfach weg. Gemessen: bei 600px Scroll stand sie auf top:-600. DIE LOESUNG overflow-x:clip statt hidden. Es haelt denselben Ueberlauf zurueck, erzeugt aber keinen Scroll-Behaelter. Ein Wort, und sticky greift wieder. Das Snippet arbeitet ohne !important, hier steht eines - damit ist die Reihenfolge im Dokument egal. WENN clip NICHT KANN clip gibt es ab Safari 16, Chrome 90, Firefox 81. Aeltere Browser lassen die Zeile fallen und behalten hidden: die Kopfzeile verhaelt sich dann wie bisher. Nichts bricht, es fehlt nur der Effekt. DER PLATZ In der Pille bleiben bei 390px rund 326px. Das Menue bleibt dabei genau so, wie es ohne Leiste ist - dieselbe Schrift, dieselbe Groesse. Nur das Logo wird deutlich kleiner: 18px hoch statt 22, also 34px breit statt 42. Damit passen alle fuenf Punkte nebeneinander, mit gut 30px Luft. Eine erste Fassung hatte das Menue auf 12px vergroessert und das Wortzeichen durch eine runde Marke ersetzt. Beides ist wieder draussen: das Menue soll sich nicht veraendern, und das Logo soll das Logo bleiben. ABSCHALTEN In functions.php MM_MOBIL_LEISTE auf false. Der body verliert dann die Klasse mm-leiste-an, und keine einzige Regel hier unten greift mehr: am Telefon ist alles wie vorher - Kopfzeile oben, scrollt weg. -------------------------------------------------------------------------- */ @media (max-width:767px){ /* 1 · Die Ursache. Ohne diese Zeile nuetzt der ganze Rest nichts. Am html-Element gibt es keine Body-Klasse - deshalb :has(). Das kann jeder Browser, der auch overflow-x:clip kann, insofern kostet es nichts. */ html:has(body.mm-leiste-an), body.mm-leiste-an{ overflow-x:clip !important; } /* 2 · Das Logo in der Leiste. Der Wert wird hier gesetzt, nicht die Regel - die steht weiter oben in Abschnitt 2 und liest ihn aus. Ein Ort fuer den Wert, ein Ort fuer die Regel. */ body.mm-leiste-an{ --mm-sticky-logo:18px; } } /* -------------------------------------------------------------------------- 6 · Telefon: die Ursache des Querscrollens -------------------------------------------------------------------------- Bis zum 19.08. stand das im Snippet "Mobil: horizontales Scrollen fixen". Es gehoert hierher, weil es dieselbe Sache regelt wie Abschnitt 5: was am Telefon mit dem Ueberlauf passiert. DAS PROBLEM Die theme-eigene Klasse .container nutzt box-sizing:content-box und legt links und rechts je 15px Innenabstand an, waehrend die Breite selbst schon auf 100% der Fensterbreite steht. content-box zieht den Innenabstand NICHT von der Breite ab - der Container wird real 30px breiter als der Bildschirm und die Seite laesst sich seitwaerts schieben. DIE LOESUNG Am Telefon border-box erzwingen, damit der Innenabstand innerhalb der Breite bleibt. Das ist die Ursache; die Zeilen darunter fangen ab, was sonst noch ueberlaeuft. WARUM ZWEI REGELN FUER DASSELBE Das Snippet setzte overflow-x:hidden auf html und body - und genau das hat die klebende Kopfzeile am Telefon verhindert: hidden erzeugt einen eigenen Scroll-Behaelter, und in einem solchen klebt position:sticky nur noch relativ zu ihm, also nirgends. clip haelt denselben Ueberlauf zurueck, erzeugt aber keinen Behaelter. Deshalb steht hidden weiter als Rueckfall fuer alte Browser da (vor Safari 16 / Chrome 90 / Firefox 81), und clip ueberschreibt es genau dann, wenn die Leiste laeuft. Ist MM_MOBIL_LEISTE aus, fehlt die Klasse mm-leiste-an, es bleibt bei hidden - und die Kopfzeile scrollt am Telefon weg wie vorher. -------------------------------------------------------------------------- */ @media (max-width:767px){ .container{ box-sizing:border-box !important; max-width:100% !important; margin-right:auto !important; } html, body{ overflow-x:hidden; } html:has(body.mm-leiste-an), body.mm-leiste-an{ overflow-x:clip !important; } } /* -------------------------------------------------------------------------- 7 · Telefon: die Kopfzeile in einer Reihe -------------------------------------------------------------------------- Bis zum 19.08. stand das im Snippet "Mobil-Menue kompakt (eine Reihe, kein Hamburger)". Es gehoert hierher, weil es dieselbe Kopfzeile formt, die in Abschnitt 5 zur Pille wird - nur eben im Ruhezustand. WAS ES MACHT Elementor bricht die Kopfzeile am Telefon sonst in eine Spalte um und bietet dafuer einen Hamburger an. Beides ist hier nicht gewollt: das Menue soll sichtbar bleiben. Also eine Reihe, nicht umbrechend, und der Menue-Bereich darf seitwaerts scrollen, falls es doch einmal eng wird. DIE ELEMENT-NUMMERN 605a9e8 ist der Kopfzeilen-Container, 3295a07 das Logo, 487b1e0 der Menue-Bereich, 0296763 das Menue selbst, dbc0a6f das Konto-Zeichen. Sie stammen aus Elementor und aendern sich nur, wenn die Kopfzeile dort neu aufgebaut wird. DER AVATAR Der Kreis wird auf 26px gesetzt, der Pfeil faellt weg. Grund: die Regel fuer das Bild allein greift nur, wenn es wirklich ein Bild gibt - beim Initialen- oder Gast-Kreis blieben sonst 38px stehen und die Zone war effektiv 67px breit, wodurch der fuenfte Menuepunkt nicht mehr passte. Die Groessen-Regel fuer das aus dem Snippet ist bewusst NICHT mitgewandert: sie hat das Bild auf 22x22 gezwungen, waehrend der Kreis 26px misst - daher der ovale Avatar am Telefon. Das Bild fuellt jetzt einfach den Kreis, geregelt im Plugin. -------------------------------------------------------------------------- */ @media (max-width:767px){ .elementor-element-605a9e8.e-con{ max-width:100% !important; width:100% !important; display:flex !important; flex-wrap:nowrap !important; align-items:center !important; gap:6px !important; padding:6px 8px !important; } .elementor-element-605a9e8 .e-con-inner{ display:flex !important; flex-wrap:nowrap !important; align-items:center !important; width:100% !important; gap:6px !important; } .elementor-element-2dfd065, .elementor-element-3295a07, .elementor-element-dbc0a6f{ flex:0 0 auto !important; width:auto !important; } .elementor-element-3295a07 img{ max-width:42px !important; width:42px !important; height:auto !important; } .elementor-element-3295a07 .elementor-widget-container{ margin-left:0 !important; width:auto !important; } .elementor-element-487b1e0{ flex:1 1 auto !important; min-width:0 !important; width:auto !important; overflow-x:auto !important; -ms-overflow-style:none !important; scrollbar-width:none !important; display:flex !important; justify-content:flex-end !important; } .elementor-element-487b1e0::-webkit-scrollbar{ display:none !important; } .elementor-element-0296763 .elementor-nav-menu{ display:flex !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:flex-end !important; gap:2px !important; width:max-content !important; margin-left:auto !important; } .elementor-element-0296763 .elementor-nav-menu .elementor-item{ font-size:10px !important; padding:4px 3px !important; line-height:1.1 !important; white-space:nowrap !important; min-height:auto !important; } .elementor-element-dbc0a6f .mma-avatar-circle{ width:26px !important; height:26px !important; font-size:11px !important; } .elementor-element-dbc0a6f .mma-avatar-arrow{ display:none !important; } .elementor-element-dbc0a6f .mma-avatar-toggle{ padding:2px !important; gap:0 !important; } .elementor-element-dbc0a6f .mma-avatar-menu--guest{ padding:2px !important; } } /* -------------------------------------------------------------------------- 0b · Die Kopfzeile behaelt ihre Hoehe -------------------------------------------------------------------------- Im gescrollten Zustand zieht sich die Leiste um rund 48 Pixel zusammen. Weil die Kopfzeile auf position:sticky steht, bleibt sie dabei IM Textfluss - der Inhalt darunter rutscht also mit nach oben, und die Seite wird um dieselben 48 Pixel kuerzer. Auf langen Seiten sieht man davon einen Sprung. Auf kurzen Seiten wird daraus ein Flattern: ist der Scrollweg nur wenig groesser als die Schwelle (72px), schrumpft die Seite beim Umschalten so weit, dass der Browser die Scrollposition zurueckklemmt - unter die Rueckschwelle (40px). Damit geht der Zustand sofort wieder aus, die Seite waechst, man scrollt weiter, und das Spiel beginnt von vorn. Deshalb bekommt die Kopfzeile ihre ungescrollte Hoehe als Mindestmass; mm-sticky.js misst sie und schreibt sie nach --mm-sticky-hoehe. Die Leiste schrumpft dann INNERHALB eines Kastens, der gleich gross bleibt: kein Sprung, kein Klemmen, kein Flattern. Der frei werdende Teil dieses Kastens ist durchsichtig und wuerde Klicks abfangen - deshalb laesst er sie durch, und nur die Leiste selbst nimmt sie wieder an. -------------------------------------------------------------------------- */ header.elementor-location-header{ min-height:var(--mm-sticky-hoehe, 0px); pointer-events:none; } header.elementor-location-header .e-con-inner{ pointer-events:auto; }