How to centre and evenly space mega menu collection cards in Horizon theme?

[phonechase]

Hi everyone,

I’m using the Horizon theme and I’ve set up a mega menu with collection cards (image + title links) under my main navigation items (e.g. Protection, Power, Accessories, Refurbished).

Website: https://phonechase.co

In the mega menu, the collection cards are aligned to the left, and the spacing between them changes depending on how many collections are in that menu (e.g. 3 items vs 5 items). It makes the layout look uneven and not very balanced.

What I’d like to achieve:

• All collection cards in the mega menu to have the same width (including the title)

  
  (in this one for instance the title goes way beyond the image)

• Equal gap between each card (regardless the amount of cards)

  
  (this gap seems to look fine but I’d like to get this centered)

• The whole group of cards, for each menu item, to be centred in the mega menu panel,

I believe this could be solved with some CSS on the mega menu container (probably using flexbox or CSS grid with justify-content: center and fixed card widths), but I’m not sure of the best way to target the correct classes in the Horizon theme.

Does anyone have a recommended CSS snippet or best-practice approach for:

1. Centre-aligning the collection cards inside the mega menu ( I don’t mind the title aligned to the left but at least to look even with the image)

2. Giving each card a consistent width and gap, no matter how many there are?

Any help or code examples would be really appreciated

Thanks so much in advance,

Marco

Phone Chase – https://phonechase.co

[phonechase]

I am talking about the mega menu. at the moment it looks messy.

[Moeed]

Hey @phonechase

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above </ body> tag

<style>
ul.mega-menu__list.list-unstyled {
    display: flex !important;
    justify-content: space-evenly !important;
}
</style>

RESULT:

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

[phonechase]

Hey Moeed,

Thank you so much for the code. It works, I am trying to get the collection cards a little closer to each other (especially when there are only 3 items total), not sure how I am going to achieve that but I will give it a try.
If you could please help that would be awesome!!

Thanks so much
Marco