Theme Compatibility and Navigation Transparency

Theme Requirements

Hero Image PLUS requires a Bootstrap 5-compatible frontend theme.

The add-on is optimized for the Concrete CMS Atomik theme.

It uses:

• Bootstrap-compatible layout and button classes
• Concrete CMS imagery and typography features
• The active theme color collection
• Concrete CMS file manager
• Concrete CMS rich-text editor
• Concrete CMS icon picker

Test custom themes before production use, especially when they change Bootstrap variables, button styles, utility classes, typography, or block containers.

Full-Width Output

The block type ignores the theme grid-framework container so the background may span the available page area.

The actual available width still depends on:

• The Concrete CMS area
• The page template
• Parent containers in the theme
• Custom area or block design settings

When the hero is unexpectedly constrained, inspect the page template and parent area rather than adding a fixed width to the block.

Atomik Navigation Transparency

The frontend output includes:

data-transparency="element"

This is the standard marker used by compatible Concrete CMS navigation behavior.

For transparent navigation:

1. Use a compatible navigation block.
2. Enable its transparency option.
3. Place the Hero Image PLUS block as the leading visual page element.
4. Avoid an intervening visible block or container between the navigation and hero.
5. Clear the Concrete CMS and browser cache after changing templates or assets.

A theme or navigation block that does not implement this transparency behavior will remain unchanged. Hero Image PLUS does not directly modify the navigation block.