Nav with Location and Time
Header with a name mark on the left, centered page links, and a location readout showing the city and a local time label on the right.
Header with a name mark on the left, centered page links, and a location readout showing the city and a local time label on the right.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Nav with Location and Time carries a studio location readout in the header: the name mark Avery Stone on the left, Work, Services, About, and Contact centred, and a pin icon with Lisbon, Portugal beside a fixed 14:32 WET time label on the right, split by a thin divider.
The links are one array and the location block is a standalone flex row, so the readout stays put while the page grows. The city and time pairing is the distinctive touch, a small signal that reassures international clients about which hours you keep.
Reach for this block when you work with clients across time zones and want your base and working hours legible on every page. The installer swaps the city, the time string, and the zone label; the time is static copy rather than a live clock.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the international freelancer header. Other location nav uses:
Tip: if you want the time to tick live, wire the label to the visitor clock with Intl.DateTimeFormat, but keep the static string as the fallback.