Centered Nav
An editorial header with the name mark pinned to the absolute center and two nav links split symmetrically on each side.
An editorial header with the name mark pinned to the absolute center and two nav links split symmetrically on each side.
Search blocks by description or jump to a page.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Centered Nav is the editorial header, the name mark Avery Stone pinned to the absolute center of the bar with two links on the left, Work and Process, and two on the right, About and Contact, perfectly mirrored. The symmetric composition reads as considered and typographic rather than functional.
Links are two arrays, leftLinks and rightLinks, keeping the split explicit. The name uses absolute positioning and a negative translate to stay centered regardless of link label widths.
Reach for this block at the top of a portfolio that leads with craft and visual sensibility. The installer swaps the name and redistributes their four links across the two arrays, keeping the count equal on each side.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the balanced editorial personal header. Other centered bar uses:
Tip: keep the link count equal on both sides; an asymmetric split breaks the composition.