The header is one of the most important parts of your websiteβ€”it usually contains your logo, navigation menu, and key links. With Elementor, you can easily customize the header to match your branding and improve the user experience.

Follow the steps below to set up and customize your header.

Table of contents

Required Plugins

Before you begin, make sure the following plugins are installed and activated:

  • Elementor (Free) – Required for designing pages and sections.
  • Elementor Pro (Paid) – Required to use the Theme Builder, which lets you create and customize headers, footers, and other global templates.

Required Theme:

For optimal performance and seamless integration with Elementor, use an Elementor-based theme. This ensures full access to all design features, smooth customization, and maximum compatibility when building your website.

For reference and documentation, we have used the Travel Elemento Theme.

Step 1: Open the Header Template

  • From your WordPress Dashboard, go to Templates > Theme Builder.
WordPress admin dashboard with the Templates, Appearance, Theme Builder and menus expanded.

  • Click the β€œ+” icon and under Header to create a new custom header.
Elementor Theme Builder interface displaying options to customize new custom Header.

Step 2: Customize Header Elements

  • Logo: Add or edit a logo using the Image widget.
  • Navigation Menu: Use the Nav Menu widget to display and style your site’s main menu.
  • Buttons/CTAs: Insert a Button widget for important actions (e.g., β€œBook Now” or β€œContact Us”).
  • Search Icon: Add the Search widget to include a search function in your header.
Elementor page editor interface showing a header layout in progress. The left panel displays widgets like Site Logo, Site Title, and WordPress Menu. The main canvas has a drag-and-drop area, and a structure panel on the right outlines nested containers and elements like icon and heading.

Step 3: Style the Header

  • Change colors, typography, and spacing under the Style tab.
  • Use the Advanced tab for margin, padding, motion effects, and custom positioning.
  • Configure responsive settings to make the header look great on desktop, tablet, and mobile.

Step 4: Publish the Header

  • Click Publish when you’re happy with your design.
Elementor editor in draft mode showing a header layout with logo, contact information, navigation menu, and a highlighted Publish button in the top right.
  • Set Display Conditions to choose where the header should appear:
    • Entire Site
    • Homepage only
    • Specific pages or categories
  • Click Save & Close to apply changes.
Elementor Publish Settings screen showing the display condition set to 'Include Entire Site' with a highlighted 'Save & Close' button in the bottom right corner.

Step 5: Frontend View

  • Once published, visit your website’s frontend to see the new custom header in action.
Frontend view of a website header showing logo, contact information, navigation links including Sample Page, WP Travel Checkout, and WP Travel Dashboard.

Conclusion

By using Elementor’s Theme Builder, you can create a fully customized header that reflects your brand and improves navigation across your site. Whether it’s adding a logo, styling your menu, or placing call-to-action buttons, Elementor gives you complete flexibility without needing to code.

Check WP Travel documentation to learn more about configurations, modules, payments, and shortcodes.

Your feedback helps us improve. Please share your thoughts.

Need assistance? Contact our support team, join our Facebook community, and subscribe to our YouTube Channel for video tutorials.

You can also find us on Facebook, Instagram, LinkedIn, TikTok, and X. Thank you for choosing WP Travel.

If you are a WP Travel Free user thinking about upgrading to Pro, simply click on the banner below.

Get WP Travel Pro