1. Documentation
  2. Site setup
  3. Headers managed via Theme Builder

Headers managed via Theme Builder

Summarize with ChatGPT

The theme header is a crucial element of your website, serving as a navigation hub for your visitors. Here’s how to edit and customize your theme header using the default options and the Elementor header builder.

1. Default theme header

By default, the theme provides a static header menu, ideal for simpler websites where extensive customization isn’t necessary.

2. Header Builder

Edit the imported header

When you import demo content, the header template is included automatically. To edit the existing header design:

  1. Go to your site admin area -> Theme Builder -> Headers.
  2. Open the Header template and click the Edit with Elementor button to start customizing.

You can adjust layout structure, spacing, colors, typography, and replace elements such as the logo or navigation menu directly in Elementor.

To edit menu items:

  • Go to Appearance → Menus
  • Select the Main Menu
  • Update menu items and save changes

Create a new header from scratch

Creating a header from scratch is simple with Elementor:

  1. Go to your site admin area -> Theme Builder -> Headers -> click Add New.
  2. In the popup, enter a Title, select Conditions as Entire Site.
  3. Click Edit with Elementor to start customizing.
  4. Design your header structure by dragging & dropping elements like Logo, Nav Menu, Woo Cart, Search, or Button widgets.
  5. You can also use pre-made templates from the Template Library (click the Key icon, then search for headers).
  6. Once done, click Update to save changes.
  7. Your selected Header template will be visible on your site.

Global header options

Navigate to your site admin area -> Theme Options > Layout -> Header to access global header settings:

  • Header Position: Choose between Default (position relative) or Sticky (remains fixed at the top of the page while scrolling).
  • Show on Scroll Up: Enabled with Sticky Header Position, displays the menu only when scrolling up.

Page-level header options

Header options can be customized on page level using Elementor:

Edit any page with Elementor -> click the Cog Icon at the bottom left of your screen -> switch to the Style tab -> open Header settings:

  • Position: Choose between Default, Sticky, and Static.
  • Transparent Header: Toggle the transparent header effect on/off.
    • Color Scheme: Modify the transparent header text color.
    • Use Secondary Logo: Use the secondary logo with the transparent header.
    • Background Blur: Apply a blur effect to the site header background.
    • Vertical Spacing: Add top and bottom padding.

Editing your theme header is crucial to maintain consistency and enhance user experience. Whether you choose the default setup or the flexibility of Elementor, these steps empower you to create a header that suits your website’s needs.

Was this article helpful?