Yet another Mega Menu Structure question - Formatting struggle

Store Design
, , ,
1

Hi all,

First of alle thanks for reading, awesome that you want to help a fellow shop owner :).

So I’m using the default Mega menu from Dawn Theme. It works like a charm but I want to tweak the menu a bit so it will look a lot better and improve the experience.

The menu structure is: Level 1, level 2, level 3; e.g. Brands> Anime> Naruto

As it is, the menu will only display a full list of collections below the level 2. I tried everything from wrap to max height, overflow, word wrap, etc. But the only outcome I get is that level 3 is truncated and hidden in overflow.

Ideally all levels will show below each other with a maximum of … 8 I guess. And move to the next collumn. See the attached picture to the desired outcome. This will look a lot better and improve the user experience.

All help is appreciated.

https://43fcb4.myshopify.com/

Pw: animeshizzle

2

If you solved this challenge: Congratulations :hugs: , you’ve beaten ChatGPT and your services are save… for now.

3

Desktop menu type?

CoreyNg_0-1689153549114.png
CoreyNg_0-1689153549114.png1534×857 103 KB

4

Hi CoreyNG, thanks for your brainspace!

Unfortunatly this doesn’t give the desired result. For a better example, see the image below (ignore that it’s alligened left, centre allignment is better imho).

As you can see all subcollections are below each other.

MEGAMENU.jpg
MEGAMENU.jpg1375×544 28.5 KB

I suspect the answer lies in the code below;

.mega-menu__list {
  display: grid;
  gap: 2.4rem 4rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
  
}

.mega-menu__link {
  color: rgba(var(--color-foreground), 0.75);
  display: block;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: calc(1 + 0.3 / var(--font-body-scale));
  padding-bottom: 0.6rem;
  padding-top: 0.6rem;
  text-decoration: none;
  transition: text-decoration var(--duration-short) ease;
  word-wrap: break-word;
}

Hope someone can help me beat this :slightly_smiling_face:

5

You mean the menu death is more than 3 levels?

Level 1, level 2, level 3, level 4; e.g. Brands> Anime> Naruto > Poster

If so, you may have a look to this
https://www.youtube.com/watch?v=uGDBNgAMifU

6

Hi CoreynG, nope look at the site. This I already tackled. It’s about the layout and alignment of the menu. The menu isn’t neatly wrapped as I would like but beneath eachother. Please look at the examples for reference.

7

You want it to be like this?

CoreyNg_0-1689232282330.png
CoreyNg_0-1689232282330.png1900×607 130 KB

.header–top-center .mega-menu__list {
flex-wrap: nowrap;
}

8

That’s clean but not very handy with a big list of the subcollections.

I want it to look like this:

MEGAMENU.jpg
MEGAMENU.jpg1375×544 28.5 KB

9

I think if the contents are static may able to make it like this manually. However, the contents of the Menu are dynamic and the width/height of the grid will affect by their labor grid. I really hope you can solve this. Please also let me know if you can find a solution the make the grid dynamic like this.

10

No solutions yet. I hope someone out here can help me.