X Theme Pro - How Can I Make the Header Responsive?

[core365]

Hi, it’s the first time I’ve used the Pro version and I’m having trouble with a couple of things:

1. I’ve been trying to make the header responsive but can’t figure out how to!

2. I’ve put the logo in the middle, but it’s not centred and I don’t know how to centre it either - it seems to depend on the length of the elements either side of it as to where it displays on the screen, but I just want it to always be displayed in the centre.

The website I’m working on is:
https://www.boardingwizard.com

Thanks!

[christian]

Hey @core365,

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.

Now for your questions:

1. 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.

2. 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.

[core365]

Hi @christian_y

Thanks for the the links to the various info! I didn’t realise there would be so much involved with building the headers and footers before getting the Pro version! I’m sure it’s the same with anything though, once you’ve done it a few times, it gets more familiar and much easier - I hope!

Thanks again!

[christian]

You’re welcome. Yes, it takes a bit of getting used to but the rewards are great.