Theme Compatibility

Top Navigation Bar PLUS is optimized for the Concrete CMS Atomik theme.

It is designed for Bootstrap 5-compatible frontend themes.

Theme-Controlled Styling

Standard dropdowns use the frontend theme's existing dropdown styles.

Mega-menu containers and links use the same fundamental dropdown classes and visual states wherever possible.

The active theme therefore controls:

• Text colors
• Background colors
• Borders
• Border radius
• Shadows
• Hover states
• Focus states
• Active states

Package CSS is limited to functionality that is not provided by a standard dropdown, including:

• Multi-column layout
• Mega-menu widths
• Mega-menu positioning
• Icons
• Descriptions
• Optional stack layout

Transparent Navigation

Transparent navigation requires suitable theme styling and sufficient contrast with the content behind the header.

Use an alternative transparent logo when the normal logo does not remain visible over the hero area.

The final appearance depends on the active theme.

Sticky Navigation

A theme may apply its own fixed-header spacing or transitions.

Site-specific CSS may be required when content is hidden behind a sticky navigation bar.

Sticky navigation is disabled while editing the page to prevent conflicts with Concrete CMS editing controls.

Content Container Selector

The default content-container selector is:

.container

Themes using another content wrapper can provide a more specific selector in the block settings.

Examples:

main .container

.site-content > .container

The selector should identify a visible element whose horizontal width represents the desired content area.

Dropdown Styling Differences

Standard dropdowns remain fully controlled by the theme.

Mega menus use compatible dropdown classes, but visual differences may occur when a theme targets only very specific standard-dropdown markup.

In that case, site-specific theme CSS may be required.

Navigation Assets

The package uses Concrete CMS frontend navigation behavior and Bootstrap-compatible dropdown conventions.

A theme that declares navigation assets as already provided must actually include the required frontend navigation JavaScript.

Recommended Testing

Test the block with:

• Atomik
• The production theme
• Desktop
• Tablet
• Mobile
• Keyboard navigation
• Transparent navigation
• Sticky navigation
• Standard dropdowns
• Mega menus