Header #1

derzeitig verwendeter Header

Zu beachten:

Header besteht aus 2 Rows
1. Row kann irgendeine Farbe haben und kann auch nach belieben gestaltet werden (hinzufügen von Buttons, Social Media, Links etc.)
2 Row immer auf transparent ansonsten klappt der Effekt nicht
Header muss "Fixed Header", "Shrinking Header" und "Only show navigation row" haben - ansonsten klappt der Effekt nicht
- Logo Size on Shrink ist dabei egal - WICHTIG: Spacing auf 0px stellen
Einzelne Menüpunkte wurden hier lokal designt - damit bei anderen Nav-Elementen auch alles von der Formatierung passt
Oberste Row im Body immer hinter Header platzieren (Place top row behind header)

Header #2

Zu beachten:

geeignet für Seiten mit wenigen Menüpunkten
2 Varianten
- entweder stellt man Header auf "Fixed Header" ein, dann läuft er mit
- oder man platziert die oberste Row im Body hinter den Header
Hier sollte dann mit On-Site-Engagements gearbeitet werden, um die Kontaktmöglichkeit darzustellen
man kann auch noch weitere Colums hinzufügen - ACHTUNG: ganz linke und ganz rechte müssen Border-Radius haben
Wenn mehrere Menüpunkte - Fluid Row aber eventuell Padding li/re der Row erhöhen

NAVIGATIONSLEISTE

Header #3

Zu beachten:

Einzelne Menüpunkte wurden hier lokal designt - damit bei anderen Nav-Elementen auch alles von der Formatierung passt
CSS im Global HTML unter Einstellungen aktivieren
Mobil entweder mit On-Site Engagement arbeiten oder eine eigene Row noch für Mobil anlegen (rechte Spalte (Icons) wird auf Mobil ausgeblendet)

Navigation

Header #4

NAVIGATIONSLEISTE

Header Classic

NAVIGATIONSLEISTE

Header "Logo mittig zentriert im Menü)

zu beachten:

eher geeignet für Websites, die eine gerade Anzahl an Menüpunkten hat
es ist eine "leere Seite" zu erstellen -> einfach beim Seitenname ein Leerzeichen eingeben
!! Wichtig: Die "leere Seite" MUSS auf Tablet und Mobil ausgeblendet werden + eine Verlinkung auf "Home" erhalten
Verschiebe die "leere Seite" so, dass zuvor und danach z.B. 2 weitere Seiten sind (Beispiel: Home - Über uns - Leere Seite - Leistungen - Kotnakt)
Funktioniert nur mit Custom CSS (Design -> Custom CSS -> "CENTERED LOGO IN NAVIGATION") -> Hier müssen noch folgende Werte hinterlegt werden:
- Höhe, Breite und URL von Logo (Code ist vorbereitet und mit Platzhalter ausgestattet. Die angegebenen Werte müssen nicht die tatsächliche Größe des Logos widerspiegeln, sondern nur das richtige Seitenverhältnis haben. URL von Filemanager nehmen (../uploads/xxxx))
- Höhe und Breite des Links (damit das Logo auf der ganzen Größe klickbar ist - am besten die gleichen Werte verwenden wie oben beim Logo)
Da das ganze responsive gestaltet ist, gibt es für die Tablet- und Mobil-Ansicht eine eigene Spalte mit dem normalen Logo als Bild-Modul. Diese Spalte bzw. das Logo sind auf der Desktop-Ansicht ausgeblendet.

 Hier die Zeile 

Beispiel Desktop Ansicht

Beispiel Tablet Ansicht

NAVIGATIONSLEISTE