Header layouts

• Logo center, nav in drawer — the Vesperia default. A pill-style top bar with hamburger left, logo centered, account/cart right.
• Logo left, nav inline — classic e-commerce. Logo aligned left, top-level menu shown inline next to it.
• Logo center, nav split — menu items split on both sides of a centered logo.

Layout settings

• Sticky on scroll — keeps the header visible when scrolling down.
• Full width — stretches the header edge-to-edge.
• Pill style — floats the header bar in a rounded pill with margin around it.

Logo

See the dedicated Logo & typography page.

Navigation

Header section → Navigation → Menu dropdown. Picks any of the menus you defined in Online Store → Navigation.

To add visual customizations (icons, badges, sub-link thumbnails) to specific items, use the menu_item block.

Search & icons

• Show search icon — opens the predictive search overlay.
• Show account icon — links to /account when customer is logged in, /account/login otherwise.
• Icon style — Round (filled circles) or Minimal (outline icons).

Header background and color

Header background and text color are settings on the Header section itself. They override the theme-wide color palette. Useful when you want a dark header on a light store.

Overlay on homepage

The header can float over the first homepage section (image / video hero) instead of taking its own vertical space. See Transparent header on homepage.