Menünavigation anpassen

Die Menü-Navigation (Toggler-Navigation) lässt sich komfortabel über eine Pflegemaske individuell anpassen.

Toggler-Navigation
Toggler-Navigation

Die BASE (Mobile First) wird standardmässig mit einer dunklen Farbe zur Menünavigation ausgeliefert. Das betrifft sowohl das Hamburger-Symbol (drei horizontale Striche) als auch die Schriftfarbe der Navigationstexte.

Eine andere Farbe lässt sich über eine Maske des Layout-Wizard einstellen. Rufen Sie dazu die Bearbeitung des Kopfbereiches auf, z.B. über das Weblication® Panel unter dem Zahnrad-Symbol und dort in der Spalte "Konfiguration / Layout". Im Block "Kopfbereich" klicken Sie auf die Schaltfläche "Darstellung des Kopfbereichs anpassen", um die Bearbeitung der header.scss (Kopfbereich) zu öffnen.
Hier findet sich u.a. der Block "Hauptnavigation", welcher auch Einstellungen zur Menünavigation beinhaltet. Die Darstellung der Menünavigation können Sie per Klick auf die Schaltfläche "Darstellung der Menünavigation anpassen" dort in der Maske (oder im Quelltext) definieren.

Um z.B. die Farbe des Toggler-Symbols anzupassen, hinterlegen Sie im Block "Allgemein" im Feld "Symbolfarbe der Menünavigation" die von Ihnen gewünschte Farbe (z.B. $baseColorPrimary2 oder direkt per Farbcode: #C20B21). Sofern hinter dem Farbcode eine !default Regel definert ist, löschen Sie diese am besten raus.
(!default bedeutet, dass es nur dann wirkt, wenn es nicht schon gesetzt wurde)

Vorher

Toggler-Navigation schwarz
Toggler-Navigation schwarz
Toggler-Navigation geöffnet schwarz
Toggler-Navigation geöffnet schwarz

Nachher

Toggler-Navigation rot
Toggler-Navigation rot
Toggler-Navigation geöffnet rot
Toggler-Navigation geöffnet rot