Navigation CSS-Klassen im bluetronix CMS – Übersicht & Anwendung
In dieser Übersicht findest Du alle wichtigen CSS-Klassen der Navigation im bluetronix CMS. Lerne, wie Du mit wenigen Anpassungen das Design, die Responsivität und das Verhalten Deiner Menüstruktur individuell gestalten kannst.
Navigation CSS-Klassen Beschreibung
Hier findest Du eine kompakte Übersicht, welche CSS-Klasse in Deinem HTML-Snippet wofür gedacht ist. So kannst Du Layout und Verhalten schnell anpassen.
Wichtig: ist ein Platzhalter aus der Navigationstabelle (z. B. 00_Menue) und wird beim Rendern durch eigene Klassen ersetzt (z. B. für Sichtbarkeit, Hervorhebung, Icons pro Menüpunkt).
Klassenübersicht
| Klasse | Verwendet in | Zweck / Bedeutung | Typische Interaktion |
|---|---|---|---|
bx-DesktopHTML1 |
div oberhalb der Navbar | Top-Leiste über dem Hauptmenü (z. B. Hinweise, Promo, App-Banner). | Sichtbarkeit über DB-Platzhalter (none) steuerbar. |
bx-DesktopHTML2 |
div unterhalb der Navbar | Bottom-Leiste unter dem Hauptmenü (zusätzliche Infos/Badges). | Sichtbarkeit über none. |
bx-nav-outer |
Wrapper um nav.bx-nav |
Äußerer Container zur Positionierung (z. B. Sticky, Schatten, Breite). | Layout-Rahmen für volle Seitenbreite. |
bx-nav |
nav Hauptnavigation | Basis-Navbar (Grid/Flex, Hintergrund, Höhe). | Globale Navbar-Styles und Responsivität. |
bx-navbar-left |
Navbar-Linke Spalte | Bereich für Menü-Icon (Burger) und Logo. | Enthält .bx-nav-icon und .bx-nav-brand. |
bx-navbar-center |
Navbar-Mitte | Container für die Menüeinträge (UL/LI) inkl. Submenüs. | Füllt Mobile/Sidebar per JS aus (Quelle: #bxNavPoints). |
bx-navbar-right |
Navbar-Rechte Spalte | Icon-Gruppe (Suche, Light/Dark, Login, Sprache, Warenkorb, Sidebar). | Buttons lösen JS-Funktionen aus (z. B. BlueSearchBar()). |
bx-nav-icon |
button / Icon-Buttons | Einheitlicher Stil für alle Navbar-Icons. | Klick-Ziele für Toggles (Mobile-Bar, Side-Bar, Suche, etc.). |
bx-nav-brand |
img Logo | Logo-Darstellung (Größe, Abstände). | Oft mit Link auf /index.html. |
bx-nav-item |
li im Hauptmenü | Listenelement eines Menüpunktes. | Kann mit .has-submenu kombiniert werden. |
bx-nav-link |
a im Menü | Stil des Menü-Links (Schrift, Hover, aktive Zustände). | Erhält Ziel/Name über DB-Platzhalter. |
has-submenu |
li mit Dropdown | Markiert Menüpunkt mit Untermenü; aktiviert Dropdown-Styles. | Öffnet/Schließt zugehöriges .bx-navbar-dropdown. |
submenu-toggle |
button neben Link | Bedienelement zum Ein-/Ausklappen des Submenüs (Chevron-Icon). | Meist nur auf größeren Screens sichtbar (s. Utility-Klassen). |
d-none, d-lg-inline |
Utility-Klassen am button | Sichtbarkeitssteuerung (z. B. ausblenden → ab lg inline anzeigen). | Responsives Verhalten des Toggles. |
bx-menu |
ul im Dropdown | Liste der Submenü-Einträge. | Wird durch Navigation aus DB befüllt. |
bx-navbar-dropdown |
ul (Dropdown-Container) | Dropdown-Panel (Positionierung, Schatten, Animation). | Öffnet per Hover/Click oder .submenu-toggle. |
bx-dropdown-item |
li im Dropdown | Einzelner Submenü-Eintrag. | Enthält .bx-dropdown-link. |
bx-dropdown-link |
a im Dropdown | Link-Stil innerhalb des Dropdowns. | Hover-/Focus-Zustände für bessere Usability. |
bx-mobile-bar |
Mobiles Menü (Off-Canvas rechts) | Container für mobile Navigation und optionale Blöcke oben/unten. | Wird per JS befüllt (Quelle: #bxNavPoints). |
bx-MobilHTML1, bx-MobilHTML2 |
Blöcke in der Mobile-Bar | Optionale HTML-Bereiche über/unter dem mobilen Menü (z. B. Logo). | Sichtbarkeit über |
bx-side-bar |
Seitliche Navigation (Off-Canvas links) | Container für alternative/zusätzliche Navigation. | Kann das Menü oder eigene Inhalte aufnehmen. |
bx-SideHTML1, bx-SideHTML2 |
Blöcke in der Side-Bar | Optionale HTML-Bereiche über/unter dem Seitenmenü (z. B. großes Logo). | Sichtbarkeit über |
WKGBAnzDiv |
Badge-Wrapper im Warenkorb-Icon | Umschließender Zählerbereich (Layout/Position). | Beinhaltet .WKGBAnzDivInner (Anzahl). |
WKGBAnzDivInner |
Badge-Inneres | Zeigt die aktuelle Warenkorbmenge an. | Wird per JS über #WKGBAnz befüllt. |
Platzhalter-Klassen aus der DB
| Platzhalter | Beschreibung | Beispiel |
|---|---|---|
|
Wird je Menüpunkt durch eine oder mehrere eigene Klassen ersetzt (z. B. only-desktop, highlight, icon-contact). | Steuert Sichtbarkeit/Style pro Button in Desktop-, Mobile- oder Side-Bar. |
Kombiniere .bx-nav-item mit DB-gesteuerten Klassen über , um einzelne Buttons gezielt in #bxNavPoints (Desktop), .bx-mobile-bar oder .bx-side-bar ein-/auszublenden, ohne den HTML-Code anzupassen.
FAQ
고객들이 자주 묻는 질문
Hier erfährst Du, welche CSS-Klassen in Deinem Navbar-HTML für Layout, Verhalten und Sichtbarkeit zuständig sind. So kannst Du gezielt Anpassungen an der Navigation vornehmen.
Was bedeutet der Platzhalter ?
Dieser Platzhalter wird automatisch durch eigene CSS-Klassen ersetzt, die Du in der Navigationstabelle (z. B. 00_Menue) festlegst. Damit steuerst Du Sichtbarkeit, Hervorhebung und Icons für einzelne Menüpunkte.
Wie kann ich Inhalte oberhalb oder unterhalb der Navbar einfügen?
Nutze dafür die Klassen bx-DesktopHTML1 (oben) und bx-DesktopHTML2 (unten). Du kannst sie im CMS über CMS ⯈ Webseite ⯈ Kopfzeile ein- oder ausblenden.
Welche Aufgabe hat die Klasse bx-nav-outer?
Sie ist der äußere Container der Navigation. Damit steuerst Du Breite, Schatten oder Sticky-Verhalten der Navbar.
Wofür steht bx-nav?
Diese Klasse definiert die Hauptnavigation selbst – also das Layout (z. B. Flex/Grid), Hintergrundfarbe und Höhe der Navbar.
Wie ist die Navbar in Spalten unterteilt?
Die Navbar besteht aus drei Bereichen: bx-navbar-left (Logo & Menü-Icon), bx-navbar-center (Menüpunkte), bx-navbar-right (Icons wie Suche, Login, Sprache, Warenkorb).
Was macht die Klasse bx-nav-icon?
Sie sorgt für ein einheitliches Styling aller Navbar-Icons. Diese Buttons steuern z. B. das Öffnen von Mobile-Bar, Side-Bar oder die Suche.
Wie kann ich Menülinks gestalten?
Mit bx-nav-item definierst Du die Listenelemente, mit bx-nav-link die Stilregeln für Schrift, Hover und aktive Zustände der Links.
Wie funktioniert die Steuerung von Submenüs?
Ein Menüpunkt mit der Klasse has-submenu enthält ein Dropdown. Mit submenu-toggle (Button mit Pfeil-Icon) kannst Du dieses ein- oder ausklappen.
Was bedeuten die Utility-Klassen d-none und d-lg-inline?
Diese Klassen steuern die Sichtbarkeit einzelner Elemente je nach Bildschirmgröße – ideal für responsive Navigationen.
Wie ist ein Dropdown-Menü aufgebaut?
Ein Dropdown besteht aus bx-navbar-dropdown (Container), darin bx-menu (Liste) mit bx-dropdown-item und bx-dropdown-link für die einzelnen Unterpunkte.
Wie funktioniert die Mobile-Bar?
Die bx-mobile-bar öffnet sich auf Mobilgeräten rechts als Off-Canvas-Menü. Sie wird per JS mit den Inhalten aus #bxNavPoints befüllt. Zusätzliche Blöcke kannst Du mit bx-MobilHTML1 und bx-MobilHTML2 ergänzen.
Was ist die Side-Bar?
Die bx-side-bar ist ein seitliches Off-Canvas-Menü (meist links). Hier kannst Du eigene Inhalte oder Navigationselemente platzieren, ergänzt durch bx-SideHTML1 und bx-SideHTML2.
Wie wird der Warenkorb-Zähler dargestellt?
Der Wrapper WKGBAnzDiv enthält WKGBAnzDivInner, das per JS (über #WKGBAnz) die aktuelle Artikelanzahl anzeigt – meist als Badge im Warenkorb-Icon.
Wie kann ich einzelne Buttons nur in bestimmten Bereichen anzeigen?
Kombiniere .bx-nav-item mit . So kannst Du Buttons gezielt in #bxNavPoints (Desktop), .bx-mobile-bar oder .bx-side-bar ein- oder ausblenden, ohne HTML-Code zu ändern.