Website Headers
Your website's header is the navigation bar that appears at the top of every page. It is the first thing visitors see, and it stays with them as they move through your site. A well-designed header grounds your audience by providing your logo, intuitive navigation links, and a clear call-to-action.
What you'll find here
Your website's header is the first thing visitors see, guiding them as they move through your site. The Headers screen gives you a centralized place to create and manage multiple standalone navigation bars for different purposes—whether you need a comprehensive menu for your marketing pages, a streamlined version for landing pages, or a unique layout for your blog. By designing your headers once, you can easily attach them to your layouts and reuse them across your entire site, keeping your branding and navigation perfectly in sync.
The headers list
Navigate to Website > Headers to access your complete library of website headers. This dashboard displays all your existing headers in an organized table, showing the Name and Header preview columns. From this central hub, you can use the search field to find a specific design, or use the quick actions to edit or delete headers you no longer need.
Centralized Header Management
Access all your website headers from a single dashboard. Easily search through your existing layouts, edit navigation elements, or create a new header to ensure a consistent, branded experience across your entire site.
The Header Editor Toolbar
Toolbar Overview
The top toolbar gives you immediate access to essential editing, previewing, and configuration tools while building your header. Switch between locales to manage multi-language content or preview your changes instantly.
Test on all devices. Always use the Device preview to check your header on tablet and mobile views. Navigation must work seamlessly across all screen sizes, and the mobile hamburger menu should be easy to tap.
Building Your Header
Just like standard website pages, headers are constructed using a flexible system of sections and columns. However, they typically rely on a specialized set of blocks optimized for global navigation—most notably the Main Menu block, which keeps your visitors oriented no matter where they land.
Building Custom Headers. While the Main Menu block provides a streamlined, all-in-one navigation solution, you have full control to design your own. Combine standalone Logo blocks with standard text and buttons to construct a completely custom header layout tailored to your brand.
Connecting Headers to Pages
Headers don't exist in isolation—they must be attached to your pages before visitors can actually see them. There are two ways to apply a header to your site:
Through a Layout
Headers don't exist in isolation—they need to be attached to pages so visitors actually see them. The most efficient approach is assigning your header directly to a website layout. Because layouts define the shared structure for a group of pages, any page using that layout automatically inherits the selected header. This is the easiest way to maintain consistent navigation across your site without manually updating individual pages.
Direct Assignment on a Page
Need to break away from a layout? You can assign a header directly to any individual page. While editing a page, open your settings and navigate to the Design tab. Use the Header dropdown to select your preferred navigation bar. This gives you the flexibility to override a layout's default header or attach a unique menu to a standalone landing page.
AI-Generated Headers
If you use Giant Context's AI to generate content, your website headers can be built automatically. These AI-crafted headers arrive in your workspace as drafts, clearly marked with an info bar at the top of the editor indicating their generated status. You retain full control—review the suggested layout, tweak the navigation links, and approve the final design exactly as you would with manually created content.
Settings dialog
FAQ
Best Practices & Troubleshooting
Test hamburger menus in the mobile preview, ensure the logo isn't too large, and check that the CTA button is easy to tap.
Overlay headers sit on top of page content. Choose text colors carefully so they remain readable against the underlying hero sections.