[Resolved] Sub-menu two columns

[Martin]

I’ve ended up with a long drop down list off one of the main menu options, how can I get the sub-menu to appear in two columns? I have a custom CSS plugin so just need to know what the magic code would be.

[Tom]

Hmm, I’m afraid there’s no magic code for that.

If you need to have that many links in your nav, you may need to use a mega menu: https://wordpress.org/plugins/megamenu/

[Martin]

Would something like this work?

http://www.prowebdesign.ro/wordpress-sub-menu-items-split-in-2-columns-the-easy-way/

[Damiaan van Vliet]

Tip: yesterday I installed max megamenu plug-in and works with GeneratePress; first look the video tutorial.
With that it is easy to have a two, three, four columns menu.

Bye.

[Tom]

That could definitely work, Martin 🙂

Thanks for the tip, Damiaan!

[brickintime]

The code from Martin really sounded interesting, but unfortunately didn’t work for me. Sadly I can’t figure out where the problem is.

http://thebricktime.de/ is the site and the menu I am trying to get in two columns is “bricksites”.

[Tom]

Just took another look at that code and it should definitely work.

Can you implement the tutorial and let me know so I can inspect your site?

[brickintime]

Yes, I also think it should work, but it doesn’t.

It’s still implemented, I didn’t took it out.

[Tom]

I’m not seeing the menu item classes added to those menu items?

[brickintime]

I added the css-class to bricksites in the main menu.

[Tom]

You’re welcome 🙂

[brickintime]

Hm…
It didn’t work

[Tom]

I’m not seeing the classes added: http://www.screencast.com/t/AAzvkAoSCOx

[brickintime]

Okay, I thought you just need to add the css to the parent link. I added the css-class “sub-menu-columns” now the every sub-menu link, but it’s still not working

And that’s what I put in the css

.sub-menu {
width: 410px;
}

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

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

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

[Tom]

Try this as the CSS:

.main-navigation ul ul.sub-menu {
    width: 410px;
}

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

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

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

[Author]

Posts