How to Add, Configure, and Manage Global Headers

The header is a core structural component of your website. It contains navigation, branding, search, login actions, and calls to action—and it can adapt dynamically based on scroll behavior and layout needs.

This guide provides a complete overview of all header capabilities, including fixed (sticky) headers, alternative headers, row structure, widget usage, spacing control, and design best practices.

What a Header Is and How It Works

A header is a global element, meaning:

• Any change made to the header affects all pages where it is enabled
• Widgets, styling, layout, and visibility are shared globally

Headers are typically used to:

• Provide consistent navigation
• Display branding and key actions
• Improve usability and orientation across the site

Where to Find and Edit the Header

The header is a global element that appears at the top of all pages, if not hidden.

Opening the Header Editor

To edit the header:

• Open Web Studio
• Look at the top-left of the canvas
• Click the Header toggle if it's not shown (eye / header icon)

When the header is enabled and visible:

• The header appears at the top of the canvas
• It becomes editable just like any other layout section
• You can add, remove, and rearrange header widgets inside it

Editing the Header

Once the header is active:

• Click directly on header widgets to edit their settings
• Add new header widgets using the widget panel
• Drag widgets to reposition them within the header
• Adjust spacing, padding, and alignment as needed

Header Structure: Rows Explained

A header can consist of up to three horizontal rows:

1. Middle Row (Main Header Row)

• Mandatory (cannot be removed)
• Contains the most advanced settings
• Controls layout, positioning, and scroll behavior
• Usually holds logo, main menu, and primary CTAs

2. Top Row (Optional)

• Can be added or removed
• Has basic styling options only
• Common uses:
  • Announcement bars
  • Contact info
  • Secondary links

3. Bottom Row (Optional)

• Can be added or removed
• Also has basic styling options
• Common uses:
  • Secondary navigation
  • Campaign or promo bars
  • Utility content

Each row can be styled independently with background color and borders.

Columns Inside the Header

Each header row is divided into three columns:

• Left
• Center
• Right

Widgets can be placed freely inside these columns and reordered by dragging.

Header-Specific Widgets

Headers support a dedicated set of widgets designed specifically for global navigation and actions. These widgets behave similarly to page widgets but are optimized for headers.

Available header widgets include:

• Logo
• Menu
• Button
• Search
• Login / Profile
• Cart
• Icon
• Social Media
• Text
• Separator
• Code

📌 Each widget has its own detailed configuration options. Refer to the individual widget articles for in-depth guidance on each one.

Header Layout Options

The header layout defines how the header is positioned and structured on the page. Each layout serves a different purpose depending on navigation needs, screen usage, and overall design direction.

On Top – Normal Size

A standard horizontal header and the most commonly used layout.

• The header spans the full width of the browser window
• All header content (logo, menu, buttons) is aligned within the defined page width
• Provides a balanced and familiar structure across all screen sizes

Best suited for:

• Most websites and page types
• Clear and traditional navigation structures
• Designs where header content should align with page content

On Top – Full-width

A horizontal header where both the container and its content stretch edge-to-edge.

• The header background spans the full width of the screen
• Header content also stretches across the entire screen width
• Creates a bold, modern, and immersive appearance

Best suited for:

• Modern or design-driven websites
• Wide layouts and large screens
• Headers that should visually connect with full-width sections

On Top – Compact

A minimal horizontal header with reduced visual presence.

• The header does not stretch edge-to-edge
• Header content is limited to the defined page width
• Takes up less vertical space than other horizontal layouts

Best suited for:

• Floating headers on top of hero sections
• Minimal or content-first designs
• Transparent headers combined with a solid sticky header on scroll

Vertical – At Left

A vertical header displayed as a sidebar on the left side of the page.

• Header content is stacked vertically
• Stays visible along the left edge of the screen
• Frees up vertical space for content

Best suited for:

• Dashboards and admin-style layouts
• Applications or member areas
• Portfolio or navigation-heavy websites

Vertical – At Right

A vertical header displayed as a sidebar on the right side of the page.

• Functions the same as the left vertical layout
• Positioned on the right side instead of the left
• Offers a more unconventional or design-focused navigation style

Best suited for:

• Creative or experimental layouts
• Designs where primary content flows from left to right
• Interfaces where navigation should feel secondary but accessible

Global Header Settings (Main Row)

The main header row includes advanced global controls:

Header Background Color

• Sets the background color of the main header row
• Can be transparent when overlay behavior is enabled

Add Bottom Border

• Adds a divider between header and page content
• Border color is configurable

Place Header on Top of the Content

• Overlays the header on top of page content
• Commonly used with transparent headers
• Ideal for hero sections and visual-first designs

Apply Fixed Header When Scrolling (Sticky Header)

• Keeps the header visible while scrolling
• Strongly recommended for usability and navigation

Fixed / Sticky Header: Important Behavior

When Apply Fixed Header When Scrolling is enabled:

• The fixed (sticky) header becomes a separate, editable header
• To edit it once it's enabled:
  1. Scroll down the page inside the Web Studio
  2. The fixed header appears
  3. Edit it just like a regular header

Key Points About Fixed Headers

• The fixed header is independent from the top header
• You can for example:
  • Add or remove rows
  • Add or remove widgets
  • Use different colors, spacing, and layouts
• It is common to replicate the top header’s structure (logo, menu, CTAs)
• But you can also make intentional design changes

Common Design Pattern

• Top header: transparent, larger, more visual
• Fixed header: solid background, compact, high-contrast

This improves readability and usability once the user starts scrolling.

Spacing, Padding, and Layout Control

Headers behave like other layout blocks when it comes to spacing:

Vertical Spacing

• You can increase spacing between rows
• Drag row handles to adjust padding

Horizontal Spacing

• Drag header widgets horizontally to add spacing
• Use widget padding to fine-tune layout

This allows precise control over alignment and breathing room.

Showing and Hiding the Header

You can toggle the header’s visibility using the visibility control on the left side of the editor.

Use cases:

• Landing pages
• Checkout or funnel steps
• Minimal or distraction-free layouts

Hidden headers remain fully configured and can be re-enabled at any time.

Alternative Headers

In addition to showing or hiding the global header, you can create and use alternative headers for specific pages. This makes it possible to change the header layout, content, or behavior without affecting the default header used across the rest of the site.

Alternative headers are especially useful for:

• Landing pages and funnels
• Campaign or launch pages
• Sales pages with reduced navigation
• Pages that require a different visual hierarchy or CTA focus

How Alternative Headers Work

Alternative headers follow the same structural rules as the default header:

• The same header widgets are available
• The same row structure applies (top row, main row, bottom row)
• The same styling and layout options can be used
• They are fully editable just like a regular header

The key difference is where and when the header is shown.

Activating an Alternative Header on a Page

To use an alternative header on a specific page:

• Open the page settings for the page you want to modify
• Enable the option to use an alternative header
• Select or edit the alternative header configuration for that pag

Once activated:

• The alternative header replaces the global header only on that page
• All other pages continue to use the default global header
• Changes made to the alternative header do not affect the main header

This gives you precise control over the header experience on a per-page basis.

Common Use Cases

• Remove navigation links on a sales page to reduce distractions
• Use a simplified header with a single CTA
• Change header background or spacing for a hero-focused layout
• Use a different logo or messaging for a campaign

Global Behavior: Critical to Understand

• Headers are global
• All changes apply everywhere the header is active
• This includes:
  • Widget content
  • Styling
  • Layout
  • Fixed header behavior

Best Practices for Header Design

• Keep navigation concise
• Avoid overcrowding all three columns
• Use center column sparingly
• Ensure strong contrast for readability
• Use fixed headers for usability
• Differentiate top and fixed headers when using transparency
• Test on both desktop and mobile

Summary

Headers allow you to:

• Build consistent global navigation
• Use up to three configurable rows
• Place header-specific widgets in structured columns
• Choose from multiple layout types
• Create fixed (sticky) headers with independent design
• Control spacing, visibility, and behavior
• Apply changes globally with confidence

When designed thoughtfully, headers provide clarity, usability, and structure—serving as the backbone of a professional and cohesive website experience.