Ausrichtung Header

Module für die möglichen Logo- und Navigationspositionen

WICHTIG: Das erste Modul (Header - Configuration - Modul) und das letzte Modul (</div> </div>) dürfen nicht deaktiviert oder verändert werden!

Weitere Elemente bzw. Module sind Stand 18.02.2017 nicht für diesen Bereich vorgesehen.

Durch klick auf das grüne Auge können Sie ein Element aktivieren bzw. deaktivieren.

Zum Ändern eines Moduls klicken Sie bitte auf den Bleistift rechts neben dem Namen des Moduls oder auf die ID direkt neben dem Namen.

Logo neben der Navigation

Linksbündig:

  • Header - Logo - Standard
  • Header - Navigation - Mainmenu
  • HTML-Modul für die mobile Navigation: 
    <a href="#mainmobil" class="nav-mobile"><i class="fa fa-bars"></i></a>

Alle weiteren Module sollten Sie deaktivieren. Diese sind bei dieser Einstellung lediglich via CSS ausgeblendet und noch im HTML-Code vorhanden.

Beachten Sie aber den Hinweis oben (WICHTIG:.....)!!

Rechtsbündig:

  • Header - Logo - Standard
  • Header - Navigation - Mainmenu
  • HTML-Modul für die mobile Navigation: 
    <a href="#mainmobil" class="nav-mobile"><i class="fa fa-bars"></i></a>

Alle weiteren Module sollten Sie deaktivieren. Diese sind bei dieser Einstellung lediglich via CSS ausgeblendet und noch im HTML-Code vorhanden.

Beachten Sie aber den Hinweis oben (WICHTIG:.....)!!

Zentriert umflossen (Split Navigation):

  • Header - Logo - Standard
  • Header - Navigation - Mainmenu
  • HTML-Modul für die mobile Navigation: 
    <a href="#mainmobil" class="nav-mobile"><i class="fa fa-bars"></i></a>

Alle weiteren Module sollten Sie deaktivieren. Diese sind bei dieser Einstellung lediglich via CSS ausgeblendet und noch im HTML-Code vorhanden.

Beachten Sie aber den Hinweis oben (WICHTIG:.....)!!

Bei z.B. 6 Menüeinträgen in der ersten Ebene müssen sie in der 4. Seite unter Experten-Einstellungen die Body-Klasse float-right eintragen.

In Demo-Inhalten ist dies die Seite Pages.

ACHTUNG: Diese Variante wird vom IE 10 nicht unterstützt!!

Logo über der Navigation

Links ausgerichtet:

  • Header - Logo - Standard
  • Header - Navigation - Mainmenu
  • Header - Navigation - Meta-Navi-Header oder
  • Header - Social media icons. Eines der Module muss deaktiviert werden.
  • HTML-Modul für die mobile Navigation: 
    <a href="#mainmobil" class="nav-mobile"><i class="fa fa-bars"></i></a>

Alle weiteren Module sollten Sie deaktivieren. Diese sind bei dieser Einstellung lediglich via CSS ausgeblendet und noch im HTML-Code vorhanden.

Beachten Sie aber den Hinweis oben (WICHTIG:.....)!!

Das Bild-Element mit der CSS-Klasse logonaviimg sollten Sie nur dann einsetzen wenn Sie über gute CSS-Kenntnisse verfügen!

Rechts ausgerichtet:

  • Header - Logo - Standard
  • Header - Navigation - Mainmenu
  • Header - Navigation - Meta-Navi-Header oder
  • Header - Social media icons. Eines der Module muss deaktiviert werden.
  • HTML-Modul für die mobile Navigation: 
    <a href="#mainmobil" class="nav-mobile"><i class="fa fa-bars"></i></a>

Alle weiteren Module sollten Sie deaktivieren. Diese sind bei dieser Einstellung lediglich via CSS ausgeblendet und noch im HTML-Code vorhanden.

Beachten Sie aber den Hinweis oben (WICHTIG:.....)!!

Das Bild-Element mit der CSS-Klasse logonaviimg sollten Sie nur dann einsetzen wenn Sie über gute CSS-Kenntnisse verfügen!

Mittig ausgerichtet:

  • Header - Logo - Standard
  • Header - Navigation - Mainmenu
  • Header - Navigation - Meta-Navi-Header
  • Header - Social media icons
  • HTML-Modul für die mobile Navigation: 
    <a href="#mainmobil" class="nav-mobile"><i class="fa fa-bars"></i></a>

Alle weiteren Module sollten Sie deaktivieren. Diese sind bei dieser Einstellung lediglich via CSS ausgeblendet und noch im HTML-Code vorhanden.

Beachten Sie aber den Hinweis oben (WICHTIG:.....)!!

Das Bild-Element mit der CSS-Klasse logonaviimg sollten Sie nur dann einsetzen wenn Sie über gute CSS-Kenntnisse verfügen!