Dedicated header for mobile and desktop

[Eulogise]

Hi, I don’t get how I can assign one header for desktop and another for mobile screens.
In X Pro, I have created two headers. However, in the Create Headers page, I see the list with both headers.

I can only assign one as ‘Global’. That makes it show on all screen sizes.
I made the desktop header global. Then selected Edit and selected the bar to edit.
In the bar’s settings I went to customise and selected the mobile breakpoints to hide.

However, It doesn’t show the mobile header on mobile breakpoints. How do I assign which pages should have the mobile header? basically it should be all of them, at the mobile breakpoint.

thanks

[nabeel]

Hi Ben,

Thank you for reaching out to us. You can do this with one header by adding two bars, one for the desktop screens and one for the mobile devices. Create different layouts in each bar and then you can show / hide bars at different breakpoints. For detailed instructions please follow: https://theme.co/apex/forum/t/my-site-is-not-responding-on-a-phone/66090/2

Let us know how this goes!

[Eulogise]

Ah, of course! Can’t believe I didn’t just think of that for myself.
Thanks for that.

[friech]

We are delighted to assist you with this.

Cheers!