it-swarm.com.de

Masthead-Modul 'Jumping' direkt nach dem Laden der Seite

Ich arbeite mich langsam durch eine Reihe von Fehlerkorrekturen auf mehreren Websites und bin zu dieser gekommen, die mich schon seit einiger Zeit verwirrt hat.

Die Site verwendet ein Masthead/Masshead-Modul (je nachdem, welches Modul es ist), und kurz nachdem die Seite geladen wurde, scheint dies etwas hinter dem Menü hochzuspringen.

Wenn Sie sich zum Beispiel eine der Behandlungsseiten ansehen, ist ein dunkelgrüner Masthead zu sehen - kurz nach dem Laden bewegt sich dieser nach oben und der weiße Text nähert sich dem Menü.

Ich kann wirklich nicht herausfinden, woran das liegt. Ich habe den Template-Entwickler um Unterstützung gebeten, aber leider waren sie weniger als hilfreich.

Ich vermute, dass es einige widersprüchliche CSS-Klassen gibt, aber ich bin keineswegs ein CSS-Experte.

Danke im Voraus. Grüße D

1
Dtorr1981

Ich bin kein T3-Experte, aber die Seite wird zunächst mit folgendem HTML geladen:

<header id="t3-header" class="wrap t3-header t3-header-1" data-spy="affix">

Einige Sekunden nach dem Laden der Seite wird eine "Affix" -Klasse hinzugefügt:

<header id="t3-header" class="wrap t3-header t3-header-1 affix" data-spy="affix">

Versuchen Sie, die Einstellungen für die Vorlagennavigation in "Fest" oder "Nicht fest" zu ändern, um festzustellen, ob dies hilfreich ist.

Wenn wahrscheinlich keine Menüeinstellungen angezeigt werden, können Sie versuchen, der benutzerdefinierten CSS-Datei CSS hinzuzufügen, um die Position der Klasse "affix" von "fixed" in "relative" wie folgt oder ähnlich zu ändern:

.t3-header.affix {position: relative !important;}

Anweisungen zum Erstellen oder Bearbeiten einer benutzerdefinierten CSS-Datei für T3-Vorlagen finden Sie unter https://joomla.stackexchange.com/a/3878/12 .

1
Neil Robertson

Ihr Site-Header besteht aus zwei Abschnitten

<header id="t3-header" class="wrap t3-header t3-header-1 affix" data-spy="affix">

welches die Navigation enthält und

<div class="wrap masthead ">

welches Ihren Seitentitel mit dem grünen Hintergrund enthält.

Der Grund dafür liegt in der Funktionsweise der Affix-Klasse von Bootstrap - Bootstrap wartet, bis Sie über den Bereich gescrollt haben, in dem sie fixiert werden soll, bevor Sie diese affix-Klasse zu Ihrem Header hinzufügen Da sich Ihre Kopfzeile oben auf der Seite befindet, geschieht dies, sobald die Seite vollständig geladen wurde (Benutzer müssen nie einen Bildlauf durchführen). Bevor die Seite geladen wurde, ist die Affix-Klasse jedoch nicht Teil Ihres Kopfzeilentags und so wird die Seite zunächst ohne gerendert.

Diese Affix-Klasse fügt das folgende CSS hinzu:

position: fixed;
top: 0;
left: 0;
right: 0;

Position: fest bedeutet, dass es in einer Ebene über allen anderen Inhalten angezeigt wird. Wenn diese Stile angewendet werden, wird der folgende Inhalt nach oben und dahinter verschoben.

Wenn Sie Javascript deaktivieren und die Seite laden, sollte dies veranschaulichen, wie der Abschnitt funktioniert, ohne dass ein Affix angewendet wird.

Wenn Sie den gesamten grünen Bereich anzeigen möchten, besteht die einfachste Lösung darin, am oberen Rand der Seite Auffüllungen hinzuzufügen:

body {
  padding-top:52px;
}

sollte es tun. Dies bedeutet, dass bei schwebendem Header ein Leerzeichen vorhanden ist, das der Größe Ihres festen Headers entspricht, wodurch der grüne Bereich an die richtige Position verschoben wird.

Damit die Kopfzeile an einer festen Position beginnt, müssen Sie diese affix -Klasse zum Code Ihrer Vorlage hinzufügen, dh ändern

<header id="t3-header" class="wrap t3-header t3-header-1" data-spy="affix">

zu

<header id="t3-header" class="wrap t3-header t3-header-1 affix" data-spy="affix">

damit ist die Afflix-Klasse vorhanden, bevor Bootstrap sie dynamisch anwendet.

Alternativ können Sie das CSS, das affix verwendet, mit dem folgenden Code hinzufügen:

header#t3-header {
position: fixed;
top: 0;
left: 0;
right: 0;
}

(Hinweis: Die letzten beiden Änderungen bedeuten, dass der Bereich an der festgelegten Position beginnt und somit den Sprung stoppt, aber nicht verhindert, dass der grüne Bereich dahinter erscheint - Sie benötigen dafür die Polsterung.)

1
Richard B