To get started, you need to make sure that your existing header only displays to mobile visitors.
To do that, open your header template using Elementor Theme Builder (Templates → Theme Builder → Header. Then, find your header’s name and click Edit with Elementor).
Or, if you haven’t created your initial header template yet, you can create a new header template to serve as your mobile header. Elementor Pro includes a number of pre-built templates that you can start from. Or, you can always build your mobile header from scratch. For reference, we’re using the header template from the Digital Agency template kit.
Once you’ve opened the Elementor interface, open the settings for the section that contains your header:
- Go to the Advanced tab.
- Find the Responsive settings.
- Use the toggle to enable Hide On Desktop and Hide on Tablet in the Visibility settings.