How to move category boxes to the top

Inspired by the new Meta design, I was playing around to get something similar to the sub-categories boxes display on the Meta Branded Theme.

I ended up here:


I can confirm that the tags dropdown is actually aligned :sweat_smile:

How do I get this done? Is it possible via CSS or JavaScript? I can deploy my own theme component and want to learn about it.

The top navigation bar needs to be close to the topics, not the subcategories, so for me this change is about UX and not just a minor visual arrangement.

This is probably not something you can do with CSS but it entirely depends on how you implemented this homepage in the first place. Is there a specific component you used to redesign the homepage?

It is not the homepage but the categories page. I’m learning and for now I haven’t learned how to generate a proper homepage. It’s one of my pending tasks :slight_smile:

Perhaps it is possible using javascript, I was really surprised to see everything that can be done from theme components, and without having technical expertise, I imagine that there may be a possibility on this.

The Meta homepage is built with the custom_homepage theme modifier + the new Blocks API, so that would be the recommended way to recreate it.

For CSS-only, if you can manage to put a grid or flex on the parent wrapper, you could re-order maybe but that’s just a cosmetic change and it’s probably going to be a mess.