How to create different headers for different screen sizes in Jupiter X?
Note: This article assumes you can make a header template in Elementor. To learn how to make it, check out this article.
There is a situation you realize that your created Header is not suitable for smaller devices. in this situation, you can create a brand new header with different styles and elements for different screen sizes.
To create different headers for different screen sizes you must create them into multiple section in one header template in Elementor.
In this example we create two Headers (sections). First header for the desktop size and second header for smaller screen sizes like Tablet and Mobile).
Desktop Header
1. Choose desktop header section by selecting its section from Navigator or by clicking Edit Selection button that appears on blue grid in active section.
2. From the Elementor left menu, go to Advanced Tab.
3. From Advanced tab open Responsive menu.
4. In Visibility section, disable Hide On Desktop and enable Hide On Tablet and Hide on Mobile options.
Tablet and Mobile Header
For second header just do above instructions but in Visibility section hide it in Desktop and unhide it for Tablet and Mobile
Note: Changes take effect only on the preview or live page and not visible in editing mode in Elementor.
