[Resolved] Divide grandchild subitems in Mega Menu

[Fredrik]

Hello,

On the subject of simple mega menu, https://docs.generatepress.com/article/building-simple-mega-menu/

Is it possible to divide grandchild subitems into rows? Instead of having a very long list of menu items.

See print to get a visual for what I’m getting at.
https://prnt.sc/u7qy2j

[Leo]

Hi there,

Not automatically unfortunately.

You basically need to separate them yourself and create one more column for them.

[Fredrik]

Hello Leo,

Okay, understood 🙂

Experimented with some CSS and it is close to what I’m looking for. But I need to find a way to align the sub-menu rows.

.sub-menu-rows ul.sub-menu li:nth-child(odd) {
float: left;
width: auto;
}

.sub-menu-rows ul.sub-menu li:nth-child(even) {
float: right;
width: auto;
}

[Leo]

Like to align them to the left edge?

I’m not aware of CSS that can do that unfortunately.

GP’s mega menu CSS is supposed to be used on a very simple mega menu.

If you need something more complicated, then it might be worth looking at a plugin solution.

[Fredrik]

Hello Leo,

I did some more research and you can do it on “simple mega menu” like this with a custom class:

	.sub-menu-divide ul.sub-menu {
		min-width: 450px;
}
	.sub-menu-divide ul.sub-menu li {
		width: 50%;
}

It does the trick. But it comes with some downsides like overlapping depending on menu structure. Perhaps it could also be fixed with some CSS.

Can you suggest any mega menu plugin that works well with GP? 🙂 Thanks!

[Leo]

All mega menu plugins that are built to work with WordPress themes should work with GP no problem.

I don’t believe there are too many options out there so might be worth giving all of them a shot and see which one you like the best 🙂

[Fredrik]

Hello Leo,

Thanks 🙂 I tried some of the mega menu plugins. A lot of them were good for basic needs, but all of them came with certain limitations that need fixing. So I decided it wasn’t a good option for my light-weight approach. Rather go the CSS route. Thx again!

[Leo]

No problem 🙂

[Author]

Posts