How to make this header "break" at smaller screen widths?

Hi, please see screencast and page URL in secure note.

I would like it so that the first container stacks on top of the second when screen width gets below an acceptable size.

Thanks :slight_smile:

Hi there,

You need to go to the Bar which contains those 2 containers and check the Wrap Children option in the Flex bOx section:

I suggest that you take a look at our tutorial which gives an idea of different layouts which you can achieve using the flexbox functionality:

You will also do some tweaks regarding the self-flex properties of the containers inside and the maximum width of them to make sure it will work properly.

An alternative way also is to have another Bar for the stacked view, then go to the first bar Customize tab and hide it for smaller devices. Then go to the second newly added bar and hide it for big devices, then in the newly created bar make the containers 100%.

All those options are discussed in the tutorial which I mentioned and it will help you get started. After that I suggest that you take a look at the tips and tricks article which talks about the elements of the header/footer builder:

https://theme.co/apex/forum/t/elements-tips-and-tricks/214

Thank you.

Hi yes I find that the padding is not working when the screen breaks. Is there a way to manage this without creating a whole new hidden bar, or is this the best way?

Screencast attached in secure note, and you have login credentials above if you need to take a look.

Thanks!

Hi There,

Please watch how you can create a responsive column with Flexbox here (the first video start at 12:40 minute mark)

Hope that helps,
Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.