Creating a Custom Header in Jupiter X using Elementor

Updated on September 28, 2021

Jupiter X theme lets you use a default customizer header or create a new custom header from scratch using Elementor. The process of creating a header using Elementor includes creating a header template and assigning it to a page. Creating the header using Elementor allows you to use all of the Elementor elements, allowing you to have a highly customized header.

Caution: You need Jupiter X Core plugin to be installed and activated among the bundled plugins to be able to use the Custom Header and Footer feature with Elementor free edition. 

Difference Between Default Customizer Header and Custom Elementor Header

Simply put, the default customizer header has limited options and styles while the custom Elementor header has pretty much unlimited customization because of its widgets. This means that you will be able to add any Elementor element to the header: buttons, images, headings, icons, etc.

Customizer header feature is a great way to quickly create a simple header to use on your website. However, if you are looking for some specific header design, Elementor will allow you to do that.

Using a custom header in your website

To use a custom header in your website, you must:

  • Create your custom header in Elementor
  • Assign it to all pages on your website or to a specific page.

We will describe them step by step.

Creating a new Custom Header in Elementor

 Adding a new custom header in Jupiter X, can be only done with the Elementor plugin. To learn how to install it, check out this article.

1. From the WordPress left menu, click on Templates and go to the Saved Templates menu.

2. Next to Templates title, click on the Add New button.

For the template type select Header and give your header a name and click on the Create Template button.

You will now be redirected to Elementor page editor where you can choose a header template from the library or create your new header from scratch using Elementor. Some of the pre-made headers are part of Elementor Pro and in order to use them, you need purchase Elementor Pro first. You can also use the Jupiter X pre-made templates. Those templates are free. 
To see the Jupiter X templates, simply click on Jupiter X.  You can use your preferable template by clicking on Insert button.

If you don’t want to use pre-made templates and plan to create your custom header from scratch, simply click on x icon. That will redirect you to the Elementor page editor.

5. If you’re using a pre-made template, you can customize it or add new widgets to it.  In order to customize a brand new header (without using a pre-made template), first determine how many columns you need for your header template. Then add your desired Elementor’s widgets to it such as Site Logo and Navigation Menu.

6. Publish the template after your customization.


In case you are using Elementor Pro for header template with Display Conditions, some of the Jupiter X header customizations may not work properly and to fix that :

1. Make sure the Display Conditions are not provided for your header templates.

Just save a template without conditions. 

2. Make sure the Sticky option under Scrolling Effect is set to None in the Advanced settings of the Section container in your header template.

Assigning the Custom Header to your Website

After creating the custom header, you must assign it to your website. To do that please follow the steps below:

1. From the WordPress left menu, go to Jupiter X > Customize.

2. From the Customizer left dashboard, click on Header.

3. For the Header Type, select Custom and assign your header from My Templates. Be noticed, Styles tab only works if you have a Default header. In case you have a Custom header, you should change its style only via Elementor.

4. Click on Close and Publish the changes.

Editing Custom Header via Customizer

There are options that allow you to edit custom header template or create a new one without leaving the Customizer panel when editing header settings. 
When setting header type to Custom, you’ll be able to select a template from the drop down list in My Templates setting or click on the “New” button to create a new header template. The popup window will appear with Elementor editor allowing you to create  a new header.

If you selected the template from the drop down list, you can also edit it clicking on “Edit” button.

This way you won’t need to return to Elementor Templates and leave Customizer panel to be able to create or edit header template. Now it’s possible inside the Customizer > Header

Note: You can also assign the custom header to a specific page only, please refer to this article to learn more about it.

There are Elementor and Jupiter X header templates available which you can import into your header and also customize the default settings.

If you want to create a header toolbar, this article describes the process.
To create a transparent header, which overlaps the content, read the article Creating a transparent header.

In case you’re not creating a custom header, but editing built-in header, to find how to set background for this header, refer to the article.

To be able to add a logo to your custom header, read the article Adding multiple versions of the logo.

Did this answer your question?