Ihr Warenkorb ist leer

Tipps zu Cassiopeia (J4)

Aktuelle Quickstarts

joomla 4 quickstart pakete
Es sind verschiedene Erweiterungen wählbar!

Menü im Cassiopeia-Template

Vertikales Menü in rechter Sidebar

Nach der Installation von Joomla 4 befindet sich das Menü-Modul auf der Modulposition "sidebar-right" des Cassiopeia-Templates. Die Darstellung der Menüpunkte erfolgt vertikal.

Cassiopeia Menü sidebar

Horizontales Menü

Häufig möchte man das Menü jedoch horizontal darstellen. Dazu eignet sich die Modulposition "menu". Es sind folgende Anpassungen nötig:

  • Rufen Sie im Backend das Menü-Modul auf: Inhalt -> Site Module: "Main Menu"
  • Weisen Sie das Menü-Modul der Modulposition "menu" zu!
  • Wählen Sie im Menü-Modul den Reiter "Erweitert"!
  • Ändern Sie dort folgende Einstellungen:
    Layout: "Collapsible Dropdown" oder "Dropdown" (vorher: Standard)
    Modul-Tag: "nav" (vorher: div)
  • Speichern Sie das Menü-Modul!


Nun wird das Menü horizontal angezeigt. Sollte das nicht der Fall sein, leeren Sie bitte Joomla- und Browsercache und aktualisieren Sie Ihre Seite!

Hinweise:

Collapsible Dropdown (Cassiopeia):
Das Menü wird mit Untermenüs dargestellt. In der mobilen Darstellung wird ein "Hamburger Menü" angezeigt.

Dropdown (Cassiopeia):
Das Menü wird mit Untermenüs dargestellt. In der mobilen Darstellung wird das Menü vertikal angezeigt.

Es gibt weitere Layout-Einstellungen. Siehe unten "Unterschiedliche Layouts für das Menü-Modul"!

Cassiopeia Menü horizontal

Wie kann man die Darstellung des Menüs ändern (css)?

Möchten Sie die Darstellung des horizontalen Menüs ändern, so können Sie das über eine Ergänzung in der user.css machen, z.B.

.container-header .mod-menu {
   justify-content: center;
   color: #ffffff;
   background-color: #22262a;
   padding: 0;
}

Die Ausrichtung des Menüs ändern sie beispielsweise wie folgt:
center (Mitte), right (rechts), left (links, standard)


Wie kann man die Hintergrundfarbe des gesamten Headers ändern (css)?

Oft möchte man nicht nur die Hintergrundfarbe des Menüs ändern, sondern die Hintergrundfarbe des gesamten Headers. Dies kann man durch folgende Einträge machen:

.container-header {
   background-color: #220e4d;
   background-image: none;
}

Es ist wichtig, dass man zusätzlich zur Hintergrundfarbe noch ein background-image: none; setzt, damit nicht der Standard-Hintergrund verwendet wird, der in Cassiopeia technisch gesehen ein Bild ist!

Nebenbei:  Verwendet man auf mobilen Geräten das Hamburger Menü (Collapsible), dann kann man es mit folgendem Eintrag verändern:

.container-header .navbar-toggler { ... }
 

Unterschiedliche Layouts für das Menü-Modul

Man kann zwischen 4 verschiedene Darstellungen für das Menü-Modul wählen:

Cassiopeia Menü Layouts

Collapsible Default Menu (Module):
Das Menü wird ohne Untermenüs dargestellt. In der mobilen Darstellung wird ein "Hamburger Menü" angezeigt.

Default (Module):
Das Menü wird ohne Untermenüs dargestellt. In der mobilen Darstellung wird das Menü vertikal angezeigt.

Collapsible Dropdown (Cassiopeia):
Das Menü wird mit Untermenüs dargestellt. In der mobilen Darstellung wird ein "Hamburger Menü" angezeigt.

Dropdown (Cassiopeia):
Das Menü wird mit Untermenüs dargestellt. In der mobilen Darstellung wird das Menü vertikal angezeigt.
 

Horizontales Menü im Footer

Wenn Sie ein Menü in der Modulposition "footer" horizontal anzeigen lassen möchten, dann weisen Sie dem Menü-Modul die Modulposition "footer" zu und nehmen folgende Einstellungen im Tab "Erweitert" vor:

  • Menu Class: menu-horizontal
  • Layout: Dropdown
  • Module Tag: nav

Cassiopeia Menü Footer

Anmerkungen

Alle angegebenen Preise sind in Euro und enthalten die gesetzliche deutsche MwSt. von derzeit 19%. Die Angebote richten sich an Kunden in Deutschland. Der Endpreis kann sich nach Eingabe der Rechnungsinformationen ändern, beispielsweise wenn die Bestellung als Unternehmen erfolgt. Die Preise beziehen sich auf das Erstellen der Quickstart-Pakete.
Mehr

Siwecos

Joominator.de gehört nicht zu The Joomla! Project ™ und wird auch nicht durch dieses unterstützt. Die Verwendung des Joomla!® -Namens, -Symbols, -Logos und der zugehörigen Marken ist im Rahmen einer von Open Source Matters, Inc. gewährten beschränkten Lizenz gestattet.
Joominator.de is not affiliated with or endorsed by The Joomla! Project™. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.

Joomla Logo