Spectra Header

Introduction

The Spectra Header lets you build a custom site header out of blocks, right inside the editor. You arrange your logo or branding, add a navigation menu, and drop in extras like a Mega Menu, all without touching code. Once it’s built, it becomes the header across your site.

How to Add a Spectra Header

1. Create a new header with Add New Spectra Header.
2. Build the layout with blocks. Most headers use Containers to place branding on one side and the menu on the other.
3. Add your site title, logo, or other branding.
4. Add a Navigation block for your menu.
5. Save or publish, and the header is ready to use across your site.

Adding Navigation

The menu in your header is a Navigation block. You can fill it in two ways:

• Page List: Automatically lists all your pages.
• Manual items: Add links, pages, and Mega Menu items by hand for full control over what appears.

Page List

The Page List displays all your pages automatically.

• Parent: Choose a page to show only its subpages. Leave it empty to list all pages.
• Animation Type: Adds an entrance animation to the list. Set to None for no animation.
• Z-Index: Sets the stacking order so the list sits above or below other elements. This only takes effect on the live page, not while you’re editing.

Editing the menu lets you add, delete, or reorder pages. Keep in mind that once you edit it, new pages won’t be added to the menu automatically anymore.

Navigation Layout

• Justification: How the menu items are aligned across the header, such as left, center, right, or spaced apart.
• Orientation: Whether the menu runs across the page horizontally or stacks vertically.
• Allow to wrap to multiple lines: Lets items drop onto a second line instead of running off the edge when space is tight.

Mobile Menu

On smaller screens, the menu can collapse into a menu icon that opens an overlay.

• Overlay Visibility: When the menu collapses. Off keeps it open at all times, Mobile collapses it on small screens, and Always collapses it on every screen size.
• Overlay Template: Create an overlay to control how the menu panel looks when someone taps the menu icon.

Adding a Mega Menu

You can turn a menu item into a Mega Menu to show a richer dropdown with columns, images, and patterns. See the Mega Menu doc for the full set of options.

A Few Tips

• Use Containers to split the header into left and right sections, so branding and menu sit where you want them.
• Set the Overlay to Mobile so the menu stays tidy on phones.
• If you add pages often, a manual menu gives you more control over order and labels than the auto Page List.

Troubleshooting

My new pages aren’t showing in the menu: Once you edit the navigation, pages stop being added automatically. Add the new ones manually, or check the Page List setup.

The Z-Index change isn’t doing anything in the editor: It only applies on the live page. View the published header to see the effect.

The menu won’t collapse on mobile: Check Overlay Visibility. It needs to be set to Mobile or Always.

FAQ

Q: Do I need to code anything to build a header?
A: No. The header is built entirely with blocks in the editor.

Q: Can I show all my pages automatically?
A: Yes. Use the Page List, which lists every page for you.

Q: How do I add a mega menu?
A: Add a Mega Menu item inside your header’s navigation. The Mega Menu doc covers the details.

Q: Why does my header look slightly different on the live site?
A: Some settings, like Z-Index, only take effect on the published page rather than in the editor.