Skip to main content
To replace the entire header with React, see Custom layouts. The settings below configure the default header. In the design customizer, open Header to edit your logo, site name, links, and button. Use the plus button beside Header links to add a link. Drag a link’s left handle to reorder it, or focus the handle and use the Up and Down arrow keys. Each link has a Label and Destination on the same row. In settings.json, links appear in the order of header.links:
Turn on Primary button to edit its label, destination, and background color. The color updates in the live preview and published site, including on mobile. The button inherits design.accentColor unless you explicitly set header.button.color to a six-digit hex color. If neither color is set, it uses #111111. Button text automatically uses black or white for contrast, including on hover. Setting a color in the button’s picker creates an override. Later accent changes preserve that override. Click Use accent color in the button’s picker to remove it and resume following the accent, or Use default color when no accent is set. In settings.json, remove header.button.color to inherit. An existing explicit value, including #111111, remains an override. Set header.button to null or omit it to hide the button.

Header position

Set header.position to "scroll" (the default) to let the header scroll with the page, or "fixed" to keep it at the top while readers scroll.