Header Layout
The Milano header has two separate layouts — one for desktop and one for mobile. You design each one independently using the header builder.
Header structure
Section titled “Header structure”| View | What it contains |
|---|---|
| Top bar | A narrow strip above the desktop header. Use it for announcements, social links, language and currency switchers. |
| Desktop header | The main desktop layout with your logo, navigation menu, search, cart, and account icons. It has three rows — top, main, and bottom. |
| Mobile header | A separate layout for phones and tablets. Typically includes logo, hamburger menu, search, and cart. |
Container width
Section titled “Container width”Open Appearance → Customize → Header → Header to set the container width for the entire header.
| Option | Behavior |
|---|---|
| Boxed | Fixed-width container, centered on the page |
| Wide | Full-width with padding on each side |
| Full Width | Edge-to-edge with no padding |
What you can do
Section titled “What you can do”- Set up the top bar with announcements and social links
- Open the header builder and start adding elements
- Configure each header element — logo, menu, search, cart, and more
Related settings
Section titled “Related settings”The Header panel in the Customizer also controls sticky behavior, colors, fonts, and other visual options. See Header settings.