Navigation CSS classes in the bluetronix CMS – overview & application
In this overview, you will find all important CSS classes for navigation in the bluetronix CMS. Learn how to customize the design, responsiveness, and behavior of your menu structure with just a few adjustments.
Navigation CSS Classes Description
Here you will find a compact overview of which CSS class in your HTML snippet is intended for what purpose. This allows you to quickly adjust layout and behavior.
Important: is a placeholder from the navigation table (e.g. 00_Menu) and will be replaced by custom classes during rendering (e.g. for visibility, highlighting, icons per menu item).
Class Overview
| Class | Used in | Purpose / Meaning | Typical interaction |
|---|---|---|---|
bx-DesktopHTML1 |
div above the navbar | Top bar above the main menu (e.g., notices, promotions, app banners). | Visibility controllable through DB placeholders (none). |
bx-DesktopHTML2 |
div below the navbar | Bottom bar below the main menu (additional information/badges). | Visibility through none. |
bx-nav-outer |
Wrapper around nav.bx-nav |
Outer container for positioning (e.g., sticky, shadow, width). | Layout frame for full page width. |
bx-nav |
nav main navigation | Base navbar (grid/flex, background, height). | Global navbar styles and responsiveness. |
bx-navbar-left |
Navbar left column | Area for menu icon (burger) and logo. | Contains .bx-nav-icon and .bx-nav-brand. |
bx-navbar-center |
Navbar center | Container for menu items (UL/LI) including submenus. | Fills mobile/sidebar via JS (source: #bxNavPoints). |
bx-navbar-right |
Navbar Right Column | Icon Group (Search, Light/Dark, Login, Language, Cart, Sidebar). | Buttons trigger JS functions (e.g. BlueSearchBar()). |
bx-nav-icon |
button / Icon Buttons | Uniform style for all navbar icons. | Click targets for toggles (Mobile Bar, Side Bar, Search, etc.). |
bx-nav-brand |
img Logo | Logo representation (size, spacing). | Often with a link to /index.html. |
bx-nav-item |
li in the main menu | List item of a menu entry. | Can be combined with .has-submenu. |
bx-nav-link |
a in the menu | Style of the menu link (font, hover, active states). | Receives target/name via DB placeholder. |
has-submenu |
li with dropdown | Marks menu item with submenu; activates dropdown styles. | Opens/closes associated .bx-navbar-dropdown. |
submenu-toggle |
button next to link | Control for expanding/collapsing the submenu (Chevron icon). | Usually only visible on larger screens (see utility classes). |
d-none, d-lg-inline |
Utility classes on the button | Visibility control (e.g., hide → show inline from lg). | Responsive behavior of the toggle. |
bx-menu |
ul in the dropdown | List of submenu entries. | Filled by navigation from DB. |
bx-navbar-dropdown |
ul (Dropdown container) | Dropdown panel (positioning, shadow, animation). | Opens on hover/click or .submenu-toggle. |
bx-dropdown-item |
li in the dropdown | Single submenu entry. | Contains .bx-dropdown-link. |
bx-dropdown-link |
a in the dropdown | Link style within the dropdown. | Hover/focus states for better usability. |
bx-mobile-bar |
Mobile menu (off-canvas right) | Container for mobile navigation and optional blocks at the top/bottom. | Filled via JS (source: #bxNavPoints). |
bx-MobileHTML1, bx-MobileHTML2 |
Blocks in the mobile bar. | Optional HTML areas above/below the mobile menu (e.g., logo). | Visibility via |
bx-side-bar |
Side navigation (off-canvas left). | Container for alternative/additional navigation. | Can hold the menu or custom content. |
bx-SideHTML1, bx-SideHTML2 |
Blocks in the side bar. | Optional HTML areas above/below the side menu (e.g., large logo). | Visibility via |
WKGBAnzDiv |
Badge wrapper in the cart icon. | Enclosing counter area (layout/position). | Includes .WKGBAnzDivInner (count). |
WKGBAnzDivInner |
Badge inner. | Displays the current cart quantity. | Filled via JS through #WKGBAnz. |
Placeholder classes from the database.
| Placeholder. | Description. | Example |
|---|---|---|
|
Each menu item is replaced by one or more custom classes (e.g., only-desktop, highlight, icon-contact). | Controls visibility/style per button in desktop, mobile, or sidebar. |
Combine .bx-nav-item with DB-controlled classes using to selectively show or hide individual buttons in #bxNavPoints (desktop), .bx-mobile-bar, or .bx-side-bar without adjusting the HTML code.
FAQ
what customers often ask us
Here you can learn which CSS classes are responsible for layout, behavior, and visibility in your Navbar HTML. This allows you to make targeted adjustments to the navigation.
What does the placeholder mean?
This placeholder is automatically replaced by custom CSS classes that you define in the navigation table (e.g., 00_Menu). This controls visibility, highlighting, and icons for individual menu items.
How can I add content above or below the Navbar?
For this, use the classes bx-DesktopHTML1 (top) and bx-DesktopHTML2 (bottom). You can show or hide them in the CMS via CMS ⯈ Website ⯈ Header.
What is the purpose of the class bx-nav-outer?
It is the outer container of the navigation. This controls the width, shadow, or sticky behavior of the Navbar.
What does bx-nav stand for?
This class defines the main navigation itself – including layout (e.g., Flex/Grid), background color, and height of the Navbar.
How is the Navbar divided into sections?
The Navbar consists of three areas: bx-navbar-left (logo & menu icon), bx-navbar-center (menu items), bx-navbar-right (icons like search, login, language, cart).
What does the class bx-nav-icon do?
It provides a consistent styling for all Navbar icons. These buttons control, for example, the opening of Mobile-Bar, Side-Bar, or the search.
How can I style menu links?
Use bx-nav-item to define the list items, and bx-nav-link for the style rules for text, hover, and active states of the links.
How does submenu control work?
A menu item with the class has-submenu contains a dropdown. You can expand or collapse this with submenu-toggle (button with arrow icon).
What do the utility classes d-none and d-lg-inline mean?
These classes control the visibility of individual elements depending on screen size – ideal for responsive navigation.
How is a dropdown menu structured?
A dropdown consists of bx-navbar-dropdown (container), inside it bx-menu (list) with bx-dropdown-item and bx-dropdown-link for the individual sub-items.
How does the Mobile Bar work?
The bx-mobile-bar opens on mobile devices as an off-canvas menu on the right. It is populated via JS with content from #bxNavPoints. You can add additional blocks using bx-MobilHTML1 and bx-MobilHTML2.
What is the Side Bar?
The bx-side-bar is a side off-canvas menu (usually on the left). Here you can place your own content or navigation elements, supplemented by bx-SideHTML1 and bx-SideHTML2.
How is the shopping cart counter displayed?
The wrapper WKGBAnzDiv contains WKGBAnzDivInner, which via JS (through #WKGBAnz) displays the current number of items – usually as a badge in the cart icon.
How can I display individual buttons only in specific areas?
Combine .bx-nav-item with . This allows you to specifically show or hide buttons in #bxNavPoints (Desktop), .bx-mobile-bar or .bx-side-bar without changing HTML code.