Navigation layout settings

Featured links

1. Shopify documentation on the theme editor
2. Company XYZ documentation on navigation layout settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this settings group to control where navigation appears in the header on desktop and mobile. It lets you keep navigation within the main row or give it a separate full-width row when the menu needs more space.

For a broader overview of the interface, see Shopify documentation on the theme editor

Layout settings

Desktop and mobile layout are controlled separately, so you can keep a compact arrangement on one screen size and a roomier one on the other. Left, center, and right place navigation within the main header row. Full-width moves it below that row into its own line.

This choice affects both visibility and balance. Keeping navigation in the main row helps create a tighter header, while a full-width row gives menu items more room and makes navigation feel more prominent.

For more detail on how alignment and grouping behave, see navigation layout settings.

Full-width does more than change alignment. It places navigation on a separate row below the main header row.

Desktop and mobile placement

On desktop, left and right can work well when navigation needs to sit alongside branding, search, or action icons. Center is often the best choice when navigation should feel like the visual focus of the header.

On mobile, prioritize clarity over symmetry. If the header feels crowded, moving navigation to a full-width row can make the layout easier to scan and reduce competition with other header elements.

Fill available space

Fill available space stretches the navigation area to use the remaining room in the desktop row. This can help the header feel more balanced when navigation sits beside smaller items and there would otherwise be empty space.

It is most useful when navigation stays in the main row. If your menu labels are long or the header already feels dense, test carefully so the extra width improves balance without making spacing feel awkward.

Note

Fill available space applies only to desktop layouts.

Usage notes

1. Match layout to menu length. Use full-width when top-level navigation needs more horizontal space.
2. Adjust each screen size separately. Choose the clearest layout for desktop and mobile instead of forcing the same placement on both.
3. Use full-width to reduce crowding. If navigation, branding, and utility items compete for one row, moving navigation below usually creates a cleaner header.
4. Expand space with intention. Turn on fill available space when the desktop row has leftover room and navigation should help anchor the layout.
5. Review the full header balance. After changing alignment, check that navigation still feels intentional next to the other header elements.
6. Check both viewports. A layout that feels balanced on desktop can crowd the header on mobile, so review both sizes before publishing.