[Resolved] Mega menu sub-parent items layout issue

[WPguy]

Hi all, I’m using a default CSS for the mega menu taken here

It works well for parent items but I need to deploy a mega menu on sub-parent items. And this is where they break the layout. Image attached.

I’ve looked for a solution on this forum and found one replacing this CSS:

nav .main-nav .mega-menu ul .sub-menu {
position: static;
display: block;
opacity: 1;
visibility: visible;
width: 100%;
box-shadow: 0 0 0;
left: 0;
height: auto;
pointer-events: auto;
transform: scale(1);
}

With this CSS:

nav .main-nav .mega-menu ul .sub-menu {
position: static;
display: flex;
flex-direction: column;
opacity: 1;
visibility: visible;
width: 100%;
box-shadow: 0 0 0;
left: 0;
height: auto;
pointer-events: auto;
transform: scale(1);
}

But it didn’t work.

Any hints? Thanks!

[WPguy]

Update: I tweaked this CSS bit:

nav .main-nav .mega-menu > ul {
position: absolute;
width: 100%;
left: 0 !important; (Made it – left: 10 !important;)
display: flex;
flex-wrap: wrap;
}

And it moved the sub-parent items to the right as needed.

I also reduced mega-menu-col-5 to mega-menu-col-2 to fit items inside the sub-parent menu items box. And they did fit (image attached)

But I still need to be able to reflect mega-menu-col-5 or at least mega-menu-col-3 inside the sub-parent menu items box.

The only option I found to accomplish this is to go to the customizer layout and increase the width of the sub-menu items, but it also increases the parent items menu width. I only need to increase the sub-parent items width.

Any hints? Thanks!

[Leo]

Hi there,

Is this what you are looking for?
https://docs.generatepress.com/article/menu-item-height-width/#sub-menu-item-width

[WPguy]

Hi Leo!

Thanks for the reference! I’ve tried all 3 methods there, but none worked.

I have attached a more detailed screenshot of what I’m trying to achieve.

Thanks!

[Fernando]

Hello there,

Can you try adding this CSS?:

div#primary-menu > ul > li > ul.sub-menu > li > ul.sub-menu {
    width: 400px;
}

You may change the value to your liking.

[WPguy]

Hi Fernando!

Thanks! That worked. I ended up with this setup:

div#primary-menu > ul > li > ul.sub-menu > li > ul.sub-menu {
width: 150%;
height: 100%; (to make sub-menu look better)
}

But getting height: 100% caused a new issue. The image attached shows the sub-menu items are too distant. How can I align them to the top?

Thanks!

[Fernando]

You can try modifying the current code you just sent to this:

div#primary-menu > ul > li > ul.sub-menu > li > ul.sub-menu {
    width: 150%;
    height: 100%;
    align-items: flex-start;
    align-content:flex-start;
}

div#primary-menu > ul > li > ul.sub-menu > li > ul.sub-menu > li {
    flex-grow: 0;
}

[WPguy]

Thanks, Fernando!

That worked great!

[Fernando]

You’re welcome!

[Author]

Posts