How to create Header Style 2 from Jupiter in Jupiter X using Elementor

Last Updated on

Jupiter X theme lets you use a default header or create a new custom header from scratch. In this article, we’ll explain how to create a new custom header using the Elementor like the Jupiter header style 2.

Adding a New custom Header

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

To add a new custom header:

1
From the WordPress left menu, click on Elementor.

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

3
For the template type select Header and give your sticky header a name.

4
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.

x
Note: To learn how to use Elementor to build your header, check out this article.

On the Elementor page editor, you will see a pop-up window with some header templates. Please skip that.

Now according to the Jupiter header style 2, we need to create 2-row sections. One for the logo and social network and another for the navigation menu.

1
Adding logo and social network to the first row

To add logo and social networks we need to add a row element with two columns:

Now, you should add a Site Logo element to the left column:

After that, add a Social Network Icons element to the right column:

 

And from its settings make it right aligned:

To make the social networks and logo vertically aligned please edit the columns(by clicking on the dark top right  button) and set the Content Position property to “Middle”:

2
Adding the navigation

Now add another row with one column by clicking on the red circle button:

And add a Navigation element to the column:

You could make the navigation menu centered from the element’s settings > style tab:

Now you could save changes and assign it globally to all pages at once or assign it only to a specific page or pages.

You may also need to duplicate the one row and add a navigation menu inside it and from the Advanced tab show one of the rows in desktop and hide the other on mobile devices. Then show the other one on mobiles and hide it in the desktops. This is to make the proper look on responsive devices.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket