Custom Header
Hand-write your nav bar with live tokens — desktop and a fully custom mobile drawer.
The Custom Header lets you hand-write the site header's HTML + CSS while the live bits stay dynamic through nav tokens. You pick it from the header's Design-tab nav-style switcher (not the Add Block modal).
Toggle Preview to see the bar render; tap the hamburger in a mobile preview to open the drawer.
The nav tokens
These work only inside the header block:
| Token | Renders |
|---|---|
{{tortus:logo}} | the brand logo (or a per-page override) |
{{tortus:brand}} | the brand name as text |
{{tortus:nav_links}} | the configured nav items as <a> links |
{{tortus:cta}} | the header CTA button |
{{tortus:menu_toggle}} | the mobile hamburger (mobile header only) |
A desktop header
Logo left, links center-right, CTA on the end — a classic bar.
Centered logo with links split either side:
Fully custom mobile header + drawer
Turn on Custom mobile header in the header settings and hand-write the mobile
bar and drawer. {{tortus:menu_toggle}} is the hamburger; while the menu is open
the header carries data-tortus-nav-open="true", so your drawer is pure CSS —
no JavaScript. Tap the hamburger in the preview to open it.
{{tortus:menu_toggle}}opens/closes; tapping a link, the CTA, or adata-tortus-nav-scrimelement closes it (Escape closes too).- Style the hamburger via
[data-tortus-nav-toggle].
Full reference: Designer Handbook → Custom navigation header.