Archived topic
Mega menu sub-parent items layout issue
8 replies · Started by WPguy on December 4, 2022
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!
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!
Hi there,
Is this what you are looking for?
https://docs.generatepress.com/article/menu-item-height-width/#sub-menu-item-width
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!
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.
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!
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;
}Thanks, Fernando!
That worked great!
You're welcome!
