Header not responsive on iphone

[FifiLAUA]

Hello,

My header uses one from the templates you guys provide. On mobile (I’m using an iPhone Xr) it cuts off half of the menu (which is inline). Is it possible for either the text to reduce its size (depending on device) or for the header to become stacked (logo at the top and menu below) again, depending on size?

Thanks

[nabeel]

Hi Fiona,

Thank you for reaching out to us. I believe you’ve not added a mobile menu, since you’re using Pro Header so you have to manually add the mobile menu in your header. To do this add a new Bar in your Header Builder let’s say Mobile Bar (see screenshot)

Then add a Container and in Elements section add a Navigation Collapsed element (see screenshot)

Then inspect your Mobile Bar and go to Customize tab and hide it for large screens (see screenshot)

Now you need to hide the desktop menu in smaller screens, to do this repeat the above process for Desktop Bar and hide your desktop menu in small devices.

Hope this helps!

[FifiLAUA]

This worked perfectly - thank you Nabeel!

[nabeel]

Glad we could help.

Cheers!