[Resolved] Sub-menu two columns

[brickintime]

I tried what you gave me here, but it’s still not working. I don’t see any difference or any change.

Do I need to to write the class just in the parent, to the child links or both. Either way is not working. But for better understanding it, that would be helpful too.

[Tom]

I just adjusted this CSS: https://generatepress.com/forums/topic/sub-menu-two-columns/#post-250267

Can you give it another shot?

[brickintime]

This one really worked and looks great! Thank you really much.
the one before also worked when I put an !important behind everything, but I guess that’s not something you should use all to often.
I just saw the two columns once I had a bad cellular reception and the site was loading really slow. So I knew the code must worked some way, but was overwritten or something by something else.
Long story short. It’s perfectly working now! 🙂

[Tom]

Awesome! Glad you got it working 🙂

[brickintime]

I think I might have been a bit to fast with the good news…
Thing is.. now EVERY other sub menu is also 410px wide and that looks really odd!
Is there a way to just address the sub-menu-columns class?

[Tom]

You can give the parent item a class, and then this would be your CSS:

.main-navigation ul li.my-parent-item-class ul.sub-menu {
    width: 410px;
}

li.my-parent-item-class ul.sub-menu li.sub-menu-columns {
    display: inline-block;
    float: left;
    width: 200px;
}

li.my-parent-item-class ul.sub-menu li.sub-menu-columns:nth-child(odd) {
    float: left;
    margin-right: 10px;
}

li.my-parent-item-class ul.sub-menu li.sub-menu-columns:nth-child(even) {
    float: right;
}

[brickintime]

Now it is working! 🙂

[Tom]

Great! 🙂

[Mosche]

I’m so glad that a solution was found.
This is a really nice effect.
Especially for products pages with lots of products.
Will be using it soon.

[Rodolfo]

Hi… I tried to implement this solution, no success…

My website is http://www.computar.com.br and I would like to have two columns under “Módulos” menu.

So, I added “sub-menu-columns” as a class in this item (on menu), and then, copy and paste css below, but is not working.

By the way, as BrickInTime did, others sub-menus should have widht=225…

After two hours, time to give a break… Later I try to find the problem… If you could help me, I thank you!

.main-navigation ul ul
{
   width: 225px;
}

.main-navigation ul li.my-parent-item-class ul.sub-menu {
    width: 5600px;
}

li.my-parent-item-class ul.sub-menu li.sub-menu-columns {
    display: inline-block;
    float: left;
    width: 225px;
}

li.my-parent-item-class ul.sub-menu li.sub-menu-columns:nth-child(odd) {
    float: left;
    margin-right: 10px;
}

li.my-parent-item-class ul.sub-menu li.sub-menu-columns:nth-child(even) {
    float: right;
}

[Leo]

Hmm would mega menu 2 columns work for you? https://docs.generatepress.com/article/building-simple-mega-menu/

[Rodolfo]

Hi Leo…

I tried to use Mega Menu…

But, it changes its position, backcolor, etc… I just uninstalled it.

If I could create two columns, using css, it would be great… but if is not possible, it is ok…

[Leo]

Can you try using our CSS mega menu?
https://docs.generatepress.com/article/building-simple-mega-menu/

[Rodolfo]

ops, my mistake Leo…

I think you was talking about “Mega Menu” – Plugin….

I will try it… give me a couple hours and I will tell you the result…

[Rodolfo]

Great Leo… it works!

Now I’m trying to customize it!

I replace width: 100% to 600px… and delete left: 0 !important;

nav .main-nav .mega-menu > ul {
position: absolute;
width: 600px;
}

I think, it is ok now! Thank you!

[Author]

Posts