Template fhs-simple-2019

[Lemon]

Hallo,
gibt es bei dem Template die Möglichkeit, den Header mit Menü in allen Ansichten zu fixieren und die Inhalte mit Footer scrollbar zu lassen?

[lck]

gibt es bei dem Template die Möglichkeit, den Header mit Menü in allen Ansichten zu fixieren und die Inhalte mit Footer scrollbar zu lassen?

Mal auf die Schnelle. Einfach am Ende deiner stylesheet.css einfügen.

Code: Select all

#header {
    height: 85px !important;
    position: fixed;
    top: 0;
    z-index: 998;
}
.nav_horizontal.closed {
    height: 40px !important;
    position: fixed;
    top: 85px !important;
    z-index: 998;
}
.content {
    padding-top: 125px;
}

@media only screen and (max-width: 980px) {
.nav_horizontal.open,
.content {
    padding-top: 85px;
}
}

Im Backend kann es dann aber Probleme mit der Ansicht geben. Das müsste man noch anpassen. Aber es gibt ja Olaf's geniales Plugin AdmTPL_XH. Damit sollte das Backend sauber zu bedienen sein.

*Edit: z-index geändert auf 998

[Lemon]

Allerbesten Dank für die schnelle Meldung, werde es so testen

[olape]

Aber es gibt ja Olaf's Plugin AdmTPL_XH.

Wieso meins
Ich dachte, daran sind wir beide Schuld.

[lck]

Aber es gibt ja Olaf's Plugin AdmTPL_XH.

Wieso meins
Ich dachte, daran sind wir beide Schuld.

Nö, nur du.

[lck]

Allerbesten Dank für die schnelle Meldung, werde es so testen

Nochmal darüber nachgedacht. Eine Kombination mit etwas CSS, Javascript (berechnet und setzt das margin-top des wrappers) und AdmTPL_XH wäre optimal.
stylesheet.css am Ende anfügen

Code: Select all

#header {
    height: 85px !important;
    position: fixed;
    top: 0;
    z-index: 998;
}
.nav_horizontal.closed {
    position: fixed;
    top: 85px !important;
    z-index: 998;
}

template.htm js script einfügen vor dem </body>

Code: Select all

<script>
function adjustContentMargin() {
  const header = document.querySelector("#header");
  const nav = document.querySelector(".nav_horizontal.closed");
  const content = document.querySelector("#wrapper");
  const htmlMarginTop = parseFloat(getComputedStyle(document.documentElement).marginTop) || 0;

  const headerHeight = header.offsetHeight;
  const navHeight = nav.offsetHeight;
  const totalFixedHeight = headerHeight + navHeight - htmlMarginTop;

  content.style.marginTop = `${totalFixedHeight}px`;
}

document.addEventListener("DOMContentLoaded", adjustContentMargin);
window.addEventListener("resize", adjustContentMargin);
</script>

[Lemon]

Danke für den Code.

Es gibt nur ein kleines Problem mit der Ansicht in Mobil mit dem Burgermenü.
Wenn ich auf einer längeren Seite etwas nach unter gescrollt habe und dann das Menü anklicke, sehe ich es nicht mehr und muss erst hier ebenfalls noch oben scrollen, um dann das Menü sichtbar zu machen.

Lässt sich das irgendwie ändern?

[lck]

Danke für den Code.

Kein Problem.

Es gibt nur ein kleines Problem mit der Ansicht in Mobil mit dem Burgermenü.
Wenn ich auf einer längeren Seite etwas nach unter gescrollt habe und dann das Menü anklicke, sehe ich es nicht mehr und muss erst hier ebenfalls noch oben scrollen, um dann das Menü sichtbar zu machen.

Lässt sich das irgendwie ändern?

Das ist jetzt die Folge vom fixed'em header. Ja, kann man ändern.
Ergänze den obigen CSS code mit

Code: Select all

@media only screen and (max-width: 980px) {
.nav_horizontal.open {
    position: fixed;
    top: 85px !important;
}
}

[Lemon]

Funktioniert prima - allerbesten Dank!

[lck]

Nochmal darüber nachgedacht. Eine Kombination mit etwas CSS, Javascript (berechnet und setzt das margin-top des wrappers) und AdmTPL_XH wäre optimal.

Ich hatte ganz am Anfang deiner Anfrage gedacht, das wäre mit position: sticky für den header & nav einfach umzusetzen, aber es funktionierte nur teilweise. Sobald man weiter nach unten scrollte, schob sich der header & nav wieder nach oben. Deswegen auch die Lösungen mit position: fixed.
Das ließ mir keine Ruhe und habe weiter gegraben und nun die Ursache des Problems gefunden. Es ist in der stylesheet.css die Angabe für body height: 100%.

Also hier die dritte Variante, umgesetzt mit reinem CSS. Keine Änderung in der template.htm nötig, kein JS und sogar (wenn man wöllte), kein AdmTPL Plugin nötig.

stylesheet.css am Ende ergänzen mit:

Code: Select all

/* header & nav position: sticky (fixed) */
body:not(body.xh_login) {
    height: auto !important; /* that's very important */
}
#header {
    height: 85px !important;
    position: sticky;
    top: 0;
    z-index: 998;
}
.nav_horizontal.closed {
    position: sticky;
    top: 85px !important;
    z-index: 998;
}