Header layouts

Three header layouts cover most editorial brand needs.

1. Logo left, nav inline

Logo on the left, primary navigation immediately to its right, search / account / cart icons on the far right. Most common — works at any width.

2. Logo center, nav below

Logo centered on its own row, primary navigation in a centered second row underneath. Editorial, magazine-style. Doubles header height on desktop.

3. Logo center, nav inline (split)

Half of the menu on the left, half on the right, logo dead center. Used by luxury brands. The menu is split by the order of links — odd-indexed left, even-indexed right.

Picking a layout

• Catalog stores with 5+ top-level categories → Logo left
• 3–4 categories, premium positioning → Logo center, nav below
• 4–6 categories, luxury / fragrance / wedding → Logo center, nav inline

Mobile rendering is the same for all three layouts.

Logo sizing

The width slider in Header settings controls desktop logo width. Mobile logo scales to ~70% of the desktop width automatically.

If your logo includes the brand name horizontally, set it wider (~180–220px). For monogram-style logos, 60–100px is typical.

Auto-collapse threshold

If the inline nav can't fit at the chosen logo width, the auto-collapse script kicks in and converts the desktop nav to a hamburger. To prevent this on tablets, either reduce logo width or shorten menu link labels.