Bricks Builder Header zwei Zeilen – Sticky eine Zeile

Ein Header mit einer oberen Info-Zeile soll bei Sticky nur die Zeile mit der Navigation anzeigen… Das lässt sich gut mit etwas CSS umsetzen.

header sticky zwei zeilen 1

Bis das Thema “Google Fonts werden mit YouTube geladen” zufriedenstellend gelöst ist, binde ich keine Videos über YouTube direkt ein.
Link zum Beitrags-Video https://www.youtube.com/watch?v=fEdNUiSmRhg

Aufbau Header

Ich erstelle den zweizeiligen Header mit einer Sektion und füge zwei Container ein. Diese setze ich unter “Inhalt” “Ausrichten” auf “Strecken”. Dadurch können beide Zeilen zum Beispiel eine unterschiedliche Hintergrundfarbe über die gesamte Breite haben…

In diese Container füge ich jeweils einen weiteren Container und belassen den in den Standardwerten. Dieser Container sollte jetzt Inhaltsbreite haben. In diese Container können wir unsere Inhalte fügen. In der ersten Zeile z.B. einen Infotext oder Kontaktdaten. Ich habe hier den Fülltext gelassen.

In der zweiten Zeile füge ich ein Logo und die Navigation ein. Dem übergeordneten Container gebe ich eine horizontale Richtung und die Inhalte verteile ich links und rechts mit Abstand dazwischen auf “Ausrichtung Hauptachse”.

container mit nav

Nun habe ich eine Sektion mit zwei Zeilen. In jeder Zeile sind zwei Container mit den jeweiligen Inhalten. Der Sektion habe ich noch einen Schatten gegeben, dann hebt sich der Header beim Scrollen besser ab…

haeder zwei zeilen 1

CSS Klasse zuweisen

Der obere Container (den wir ausblenden wollen) bekommt nun unter “Stil” “CSS” eine eigene CSS Klasse. Hier “info-text”…

css klasse

Alternativ können wir auch die bestehende ID des entsprechenden Containers nutzen. Dann brauchen wir keine eigene Klasse eingeben. Hierbei wäre es “brxe-nknstt”. Siehe im Screenshot der Developers Tools unten. Die ID wird bei dir anders sein…

Fixierter Header

In der Header Einstellung stelle ich den Header auf “Fixierter Header”. Das heißt, beim Scrollen der Seite bleibt der Header am Bildschirmrand stehen.

fixierter header

Dabei Bricks gibt dem Header automatisch die CSS Klasse “sticky” und das entsprechende CSS, welches den Header fixiert.
Scrollen wir nun, bekommt der Header noch die Klasse “scrolling” dazu. Mit der Klasse “scrolling” können wir mit eigenem CSS die obere Zeile beim Scrollen ausblenden.

developer tools

Benutzerdefiniertes CSS

Ich wähle den Container “obere Zeile” an und gehe im “Style” Tab auf “CSS” und “Benutzerdefiniertes CSS”. Dort gebe ich folgenden CSS Code ein:

.scrolling .info-text {display: none;}
benutzerdefiniertes css

Alternativ mit der ID

.scrolling #brxe-nknstt {display: none;}
developer tools id

.scrolling spricht das Element wenn gescrollt wird an. .info-text (alternativ die ID) spricht unsere obere Zeile an und display: none; blendet diese dann aus. Das ganze funktioniert auch mit der Header Einstellung “Sticky beim Scrollen”.

sticky beim scrollen

In Bricks können wir die Elemente im Code Eingabefeld auch mit “root” ansprechen. Das funktioniert bei mir nicht, wenn ich davor noch mit einem Selektor arbeite. Also in diesem Fall .scrolling

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert