- This topic has 8 replies, 3 voices, and was last updated 3 years, 4 months ago by
.
-
Posts
-
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!
Customer Support
Hi there,
Is this what you are looking for?
https://docs.generatepress.com/article/menu-item-height-width/#sub-menu-item-widthHi 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!
Customer Support
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!
- You must be logged in to reply to this topic.
