How to create Header Style 2 from Jupiter in Jupiter X using Elementor
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
To add a new custom header:
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.
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.
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”:
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.