Transparent Nav
A background-free header with the studio name on the left and anchor links on the right, designed to float over a hero section.
A background-free header with the studio name on the left and anchor links on the right, designed to float over a hero section.
The Portfolio Collection unlocks the source for every Portfolio block. All Access unlocks every Collection.
Already purchased? Log in
Transparent Nav is a minimal header that floats over the hero below it: the name Avery Stone on the left and four anchored links, Work, About, Services, and Contact, on the right, with no background fill and no border. The header is position absolute so the hero image or colour shows through. A preview fill area labelled Hero content sits here makes the bar visible in isolation.
Links are one array. No background is the distinctive detail; it signals a visual practice where the hero does the first impression work, not the chrome.
Reach for this block as the top of a page whose hero section sets the visual tone, typically a full-bleed image or a strong colour field. The installer swaps the name and anchor IDs for their own sections.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the overlay header for a hero-led homepage. Other transparent nav layouts:
Tip: transparent navs only work when the hero beneath has enough contrast at the top edge; test with both light and dark hero backgrounds.