Pro Header not responsive and no hamburger menu

[smart_x]

Hi X team,

I’m designing a new header in Pro. I notice that when I resize my browser window the Pro header is nor responsive.
My current header which was made in X will shrink and show a the Hamburger menu.

How can I make this the same in Pro?

Thank you.

[thai]

Hey There,

The key to creating your desired layout in Pro’s Header and Footer builders is understanding Flexbox. We have a tip for that here. It would also be best you know the interface well so I’d recommend you watch the Header and Footer introduction here.

• You can achieve responsive design with Flexbox but you need to understand how it works. That would require some time to understand so what you could do here is utilize the Hide During Breakpoints option to hide your section and create a new one for mobile which you will then hide on desktop and laptop views.

• You will need to set the Flex Basis of each of your containers to the same value like this.

But, as I’ve said earlier, for best results, you need to understand how Flexbox works because for example, the social buttons in my screenshot is aligned to the end by setting its container’s Flex Layout > Horizontal to End.

Thanks.

[smart_x]

Hi X team,

Ok so no out of the box responsive with headers designed in Pro.
I’ll have a look at Flexbox but sounds no that easy

[rad]

Hi @smart_x,

The Pro header builder is to allow users to create their own header, it’s an advanced feature meant for configuration and customization. And it’s not automatic similar to X’s header, you’ll have to create your own header. Though, it’s not mandatory, you can delete the custom header and it will then use the default header similar to X.

Please check our knowledge base related to Pro and its feature. And yes, it’s a bit hard from the start but worth it once you become familiar with it. You can also try importing existing templates through Design cloud and create your header from it, then you can play with its setting , please check this https://theme.co/apex/forum/t/template-manager/20364 especially the Design Cloud (Pro) section.

Thanks!