Mobile responsiveness in Pro

Support
#1

Hi there,

I was wondering if you could help me?
I am using the new Pro theme, and am getting to grips with the new header system.
Loving the easy new worklow with how to add elements and place them correctly etc.
However, I am a touch confused how to make headers work flexibly for mobile.

My question is - is there a way to make one header that displays on desktop, and a different one for mobile?
When I create each header, how can I set one for desktop only and one for mobile display only?
Or is there another way that I am missing?

I am also having strange things happening to the social media circle icons in mobile.

Many thanks, and please see below images for the website http://ispeeduk.com/

http://ispeeduk.com/wp-content/uploads/2017/09/ispeed-desktop.jpg

http://ispeeduk.com/wp-content/uploads/2017/09/Screenshot_20170925-113838.png

Thanks again and speak to you soon!

#2

Hi There,

You won´t create a second header, but on the header builder, every BAR, Container, and Elements have a customize tab which contains a hide based on screen width option.

You can hide completely your bars or hide specific elements according to the screen width and add other elements for different screen widths.

So basically you could hide your second grey bar, and add a new one made for mobile.

Hope it helps

#3

Hi there,

Thanks for your reply.
This makes a lot of sense!
I am looking through the bar setup/dimensions etc, and cannot see where I am able to hide it based on screen width.
I am going to Header - Bar (edit) - Setup. Can’t see anything there. Then trying Design - can’t see anything there either.

Could you please let me know where the option is - so I can change this?

#4

Hi There,

It is on Customize tab

screenshot

Cheers :slight_smile:

#5

Hi there,

Thanks so much!

#6

Glad to see we managed to help!