How to create different headers for mobile and desktop.

Hello, @everyone,

In the PORTO WordPress theme, the customization possibilities are vast, spanning from the header to the footer of your website, all thanks to the versatile “Template Builder” feature. Let’s walk through the process.

To begin, navigate to the Dashboard, then head to Porto >> Template Builder >> Header. Here, you can fine-tune the pre-designed demo header or craft a brand-new one. Take a look at this screenshot for reference: https://postimg.cc/Lh9KgbnF

Once you’re in the editor, you can effortlessly adjust the layout for both mobile and desktop views. You have the flexibility to create distinct layouts tailored for each. Here’s an example layout for clarity: https://postimg.cc/RJ4MWSyk

After creating your layouts, it’s crucial to define the “Display Conditions” for them to appear selectively on mobile and desktop devices. Utilize PORTO’s Conditional Rendering feature for this purpose. This screenshot illustrates the process: https://postimg.cc/6yTQn3yK

Once the conditions are set, save your layout and revisit your site after clearing the browser cache. You should see the desired results. Check out these screenshots for confirmation: https://postimg.cc/87DnxFMQ & https://postimg.cc/2bqHnnRv

Remember, if you’ve crafted a new layout, ensure you set the layout conditions before saving it. This article provides guidance on setting conditions for custom blocks: https://www.portotheme.com/wordpress/porto/documentation/display-condition/

I trust this explanation proves helpful and clarifies any queries you may have. Have a wonderful day!

Regards,
Aizaz from PThemes.