Header
The header is the primary navigation element of your store. Claro offers 3 distinct layout styles with extensive customization options.
Layout styles
| Layout | Description |
|---|---|
| Logo center, menu left | Logo centered, navigation aligned left, utility icons on the right |
| Logo left, menu center | Logo on the left, navigation centered, utility icons on the right |
| Logo center, menu below | Logo centered on top row, navigation and icons on the bottom row |
On mobile, all layouts collapse to a consistent experience: hamburger menu on the left, logo centered, and cart/search icons on the right.
Header settings
| Setting | Description | Default |
|---|---|---|
| Logo | Upload your store logo | — |
| Logo height | Height of the logo in pixels (20–80px) | 40px |
| Menu | Select which navigation menu to display | Main menu |
| Show search | Display the search icon in the header | On |
| Show account | Display the account icon (login/register) | On |
| Enable sticky header | Header stays visible when scrolling down | On |
| Hide on scroll | Sticky header hides when scrolling down, shows on scroll up | Off |
| Enable transparent header | Header becomes transparent over banners/slideshows | Off |
| Header height | Overall header height (56–120px) | 72px |
Mega menu
Create rich dropdown menus with up to 4 columns. Each column can display:
- A sub-menu from your navigation
- A featured image with heading and link
- Or remain hidden (set to "none")
To set up a mega menu:
- In the Header section, click Add block → Mega menu
- Enter the Menu title — this must match the exact text of a top-level menu item
- Configure each column with a menu, image, or leave as "none"
Mobile navigation
On mobile devices, the header displays a hamburger menu that opens a slide-in drawer. The mobile drawer includes:
- Layered navigation with back buttons for sub-menus
- Search field
- Account link
- Country and language selectors (if enabled)
Transparent header
When enabled, the header becomes transparent and overlays the first section on the page. This works best with sections that have a background image, like the Slideshow or Banner sections.
The section below the header must also have Allow transparent header enabled in its settings.