Wide Nav
A full-width header with the name mark on the left, five centred navigation links, and a contact button on the right in a generous 16-unit bar.
A full-width header with the name mark on the left, five centred navigation links, and a contact button on the right in a generous 16-unit bar.
The Portfolio Collection unlocks the source for every Portfolio block. All Access unlocks every Collection.
Already purchased? Log in
Wide Nav fills a 16-unit-tall header with the name mark Avery Stone on the left, five centred navigation links, Work, Case Studies, Services, About, and Process, spaced generously in the middle, and a Get in touch button on the right. The links occupy all the remaining horizontal space so the header reads as a considered layout rather than a condensed utility bar.
Nav links are one array. Centring the link group with flex-1 and justify-center is the distinctive choice: it keeps the name mark and the CTA anchored to their respective edges while the links float to the true centre.
Reach for this block as the site header for a portfolio with five or more top-level sections. The installer swaps the name, the link labels and hrefs, and the CTA label.
A natural flow around it on a Portfolio Pro page:
Before
Nothing; the navbar is the first element on the page.
After
One strong use is the full-practice portfolio header. Other wide nav uses:
Tip: five links is the comfortable maximum; beyond that the centred group starts to crowd at md breakpoint.