Editing headers and footers

[redleaf]

Hi I’m struggling to understand the editing of headers. In the attached mock up how would I create a new row and align these elements?

Can you point me at a good tutorial (the documentation here https://theme.co/docs/header-footer-overview doesn’t explain it)
–John

[prakash_s]

Hi @redleaf,

Thanks for writing to us.

First of all, add a bar with two containers. Then add social icons in the first container and rest elements in the second container. Then edit the Bar -> Flex box -> Child placement (choose column here).

Hope it helps you.
Thanks.

[redleaf]

Hi Prakash that doesn’t work? I added another container as you suggest (see attached). I cannot set the bar to columns as all the containers would then be above one another.
I think what I need is a container inside a container - but that doesn’t seem to be possible. There must be a way to put those social icons abover the next elements?

[nabeel]

Hey @redleaf,

Here you need to create two Global Blocks one Global Block with the social icons and other Global Block with the other elements.

Now add a container and add these two Global Blocks inside the container and then you can go to Container’s settings and set the Child Placement to Column under Flexbox settings (see screenshot)

This should work as expected, let us know how this goes!

[redleaf]

Thanks. that works OK.

[tristup]

Hi @redleaf,

Glad that it works.

Thanks