1. Documentation
  2. Site setup
  3. Creating website header

Creating website header

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. Elementor header builder

Edit the imported header

When you import demo content, the header is included. To make style changes or reorganize menu items:

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

To modify menu items, navigate to Appearance -> Menus -> select the Main Menu item from the dropdown-> edit menu items and save your changes.

Create a new header from scratch

Creating a header from scratch is simple with Elementor:

  1. Go to your site admin area -> Headers -> click Add New.
  2. In the popup, enter a Title, select Type as Header, Conditions as Entire Site, and activate the toggle.
  3. Click Edit with Elementor to start customizing.
  4. Design your header structure by dragging & dropping elements like Logo, Nav Menu, Woo Mini Cart, Header Search, Popup Modal, or Button widgets.
  5. You can also utilize pre-made templates from the Template Library (click the Key icon and 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?