2

Fixierter Kopfbereich (Header) mit Thrive Architect

In dieser Anleitung erkläre ich Ihnen, wie im Thrive Architect ein Header am oberen Seitenrand fixiert wird, auch dann, wenn nach unten gescrollt wird.

 

Background Section erstellen

Der fixierte Header besteht aus einer Background-Section. Hier können sämtliche Inhalte platziert werden. Wie zum Beispiel ein Logo und ein Menü.

 

ID vergeben

Jetzt muss für den Header eine ID vergeben werden. Diese wird benötigt, damit dieser Header (also die Background Section) mit CSS adressiert bzw. angesprochen werden kann.

In diesem Beispiel vergeben wir für den Header den Namen: „menuheader“ (siehe im Bild unten links)

Selbstverständlich ist dieser Name frei wählbar. Sollten Sie jetzt einen anderen Namen wählen, müssen Sie später im CSS Code diesen Namen anpassen.

 

Einen Schritt zurück gehen

Jetzt klicken Sie oben links auf dem Pfeil, damit Sie einen Schritt zurückgehen können.

 

In die Einstellungen gehen

Klicken Sie dann oben links auf das Zahnrad, um in das Einstellungsmenü zu gelangen.

 

Custom CSS auswählen

Hier klicken Sie auf den mittleren Auswahlbereich „Custom CSS“, wodurch sich ein Eingabefenster für den CSS Code öffnet.

 

CSS Code eingeben

Geben Sie hier dann den folgenden CSS Code ein (Sie können diesen hier kopieren und dann dort einfügen)

#menuheader {

position: fixed !important;

z-index: 1000 !important;

top: 0 !important;

width: 100% !important;

vertical-align: top;

}

 

Mit der # sprechen Sie in CSS eine ID an. Wenn Sie der Background Section einen anderen ID Namen als „menuheader“ gegeben haben, vergessen Sie nicht, diesen auch hier anzupassen.

 

CSS Eingabe schließen

Oben rechts im CSS Eingabefenster klicken Sie auf das kreuz, um die Eingabe zu beenden. Der CSS Code bleibt dann automatisch erhalten.

 

Überschrift ist weg

Der CSS Code sorgt dafür, dass dieser auf die Seite  gelegt wird und dabei immer oben bleibt.

Der kleine Nachteil ist jetzt, dass hierbei die Überschrift nach oben rutsch, weil die oben liegende Background Section nicht mehr als Begrenzung erkannt wird.

Das bedeutet, wir müssen jetzt den Abstand oben anpassen, damit die Überschrift wieder sichtbar wird.

 

Background Section auswählen

Dazu wählen Sie die Background Section mit dem Inhalt (hier weiß) aus, damit sie dessen Einstellungen in Layout & Position verändern können.

 

Oberen Margin anpassen

Geben Sie jetzt im oberen Margin einen Wert ein, der größer ist, als die Höhe des Headers.

 

Oberen Margin anpassen

In diesem Beispiel reicht ein Wert von 100 aus, damit die Überschrift wieder sichtbar wird (siehe Bild)

 

Vergessen Sie am Ende nicht, Ihre Seite einmal abzuspeichern, damit Ihre Änderungen nicht verloren gehen.

 

 

Klicke hier, um einen Kommentar zu hinterlassen 2 Kommentare
Henning - 3. März 2018

Sehr schön erklärt! Danke. 🙂

Antworten
Frank - 13. Juli 2018

Perfekt,….danach hatte ich schon lange gesucht.
Thrive Architect ist echt genial, nur man muss auch noch den ein oder anderen Trick wie diesen kennen.

Antworten

Hinterlassen Sie eine Antwort