Verwendung von integrierten Einstellungen oder benutzerdefiniertem CSS?

Navi+ bietet mehrere gängige Konfigurationsoptionen für Menüs im “Design” Tab, wie Hintergrund, Typografie (Schriftfamilie, Größe..) und Icons/Bilder (Größe, Abstand, Kurve…). Durch die Verwendung dieser Einstellungen kann Ihr Menü in der Regel so gestaltet werden, dass es zum Gesamtdesign und Branding Ihrer Website passt.

Navi+ Menüs unterstützen bis zu 3 Ebenen. Im “Design” Tab können Sie nur den Stil für 2 Ebenen konfigurieren, und es gibt keine direkte Option, um die Schriftgröße oder die Größe von Icons/Bildern für die Menüs der Ebene 2 und 3 festzulegen. Wie können Sie das also tun?

Tiefe Menüanpassung mit dem CSS & Coding-Tool

Wenn Sie oder Ihr Webentwickler jedoch ein grundlegendes Verständnis von CSS (Stylesheets) haben, können Sie das gesamte Menüdesign mit dem integrierten “CSS & Coding” Tool in Navi+ anpassen, ohne Ihre Theme-Dateien direkt zu bearbeiten. Dies bietet mehrere Vorteile:

• Sie können CSS-Konfigurationen für Navi+ Menüs von Ihrem Theme trennen. Das bedeutet, dass ein Upgrade oder eine Änderung Ihres Themes Ihre Navi+ Menüs nicht beeinträchtigt.
• Navi+ verwendet einen intelligenten Schutzmechanismus, indem es automatisch ein Präfix (wie #SF-123456789) am Anfang jeder CSS-Regel hinzufügt. Dies hält CSS für verschiedene Navi+ Menüs isoliert und minimiert das Risiko von Stilkonflikten.
• Wenn nötig, können Sie dennoch CSS hinzufügen, das die gesamte Website direkt innerhalb von Navi+ beeinflusst, obwohl dies sparsam und nur bei Bedarf verwendet werden sollte.

Wichtiger Hinweis: Das Internal Stylesheet / CSS Textfeld fügt automatisch ein Präfix (z. B. #SF-123456789) vor jeder CSS-Regel hinzu. Dies stellt sicher, dass Ihr CSS nur auf das spezifische Menü angewendet wird, das angepasst wird, und verhindert Stilkonflikte.

Einige typische Fallstudien zur Verwendung von CSS

1) Um das Erscheinungsbild des gesamten Menüs auf der höchsten Ebene zu konfigurieren, können Sie einen Snippet schreiben, der kein Standard-CSS, sondern sehr einfach ist. Zum Beispiel ändert der folgende Snippet den Menühintergrund auf rot. Fügen Sie den folgenden Code in das Internal Stylesheet / CSS Textfeld ein:

{
    background: red;
}

2) Konfigurieren Sie Größe, Typografie und Farben für jede Menüelementebene. Fügen Sie den folgenden Code in das Internal Stylesheet / CSS Textfeld ein:

// Passen Sie den Textstil der Menüelemente der Ebene 1 an
ul > li.item > .inner .name {
    font-size: 14px;
    color: red;
}

// Passen Sie den Textstil der Menüelemente der Ebene 2 an
ul.children[menulevel="2"] > li.child > .inner .name{
     font-size: 16px; 
     color: blue;
}

// Passen Sie den Textstil der Menüelemente der Ebene 3 an
ul.children[menulevel="3"] > li.child > .inner .name{
     font-size: 13px; 
     color: green;     
}

3) Ändern Sie die Schriftstärke mit font-weight. Fügen Sie den folgenden Code in das Internal Stylesheet / CSS Textfeld ein:

// Setzen Sie die Schriftstärke des Namens
.name {
  font-weight: 700;
}

// Setzen Sie die Schriftstärke der Beschreibung
description {
  font-weight: 700;
}

4) Passen Sie die Größe des Pfeils an. Fügen Sie den folgenden Code in das Internal Stylesheet / CSS Textfeld ein:

ul > li.is-parent-top::after {
  font-size: 24px !important;
}