Success
Hamburger menu
Shows a mobile menu button and helps keep your header navigation easy to find on smaller screens.
Use this block to display the hamburger button that opens your main navigation on mobile devices. If you want customers to reach your main menu on smaller screens, this block needs to be included. For a broader overview of how theme blocks work, see Shopify documentation on sections and blocks
This block is mobile-only and is required for main navigation to work on mobile.
Alignment settings
Section titled “Alignment settings”Use these settings to fine-tune the block’s position within the space it has been given. They are most useful when the block is stretched wider by your layout choices, rather than sitting at its natural width.
If alignment changes seem subtle, that is usually because the block does not have much extra space to work within. Set the layout first, then use alignment to refine the final position.
Layout settings
Section titled “Layout settings”Use the mobile layout setting to choose where the menu button sits in the row on smaller screens. Left and right placement usually feel most familiar, while a centered position can work in more minimal header designs.
A full-width layout gives the block more room in the row, which can make alignment controls more noticeable. Use this carefully so the header still feels balanced with your other mobile elements.
The fill-space option affects desktop row spacing only. It can help distribute space across the row when this block sits beside other header blocks, but it does not make the button appear on desktop.
Usage notes
Section titled “Usage notes”- Keep mobile access available. Remove this block only if you intentionally want no mobile access to the main navigation.
- Choose a familiar position. Left or right placement is usually easiest for customers to spot quickly in the header.
- Use width deliberately. Full-width layouts can help with spacing, but they can also make a simple header feel oversized.
- Adjust alignment last. Layout choices have the biggest effect, while alignment works best as a finishing adjustment.
- Check both viewports. Review the header on mobile and desktop after changing layout or spacing so the button still feels clear where it appears.
- Keep nearby actions readable. If other header items share the same row, make sure the menu button does not compete with them for attention.