How to Display Submenu in 2 Columns instead of one?

[sdbroker]

Hello,

I want to add a few pages on the Header's Menu and when adding more than or 7 the submenu gets too long and runs down past what you can see on the screen in a laptop or tablet. Is there a way in CSS where this can be done so the submenu displays in 2 or preferable 3 columns, centered under the main parent menu instead of floating left?

Thank you!

[nutsandbolts]

Hi!

Can you post a link to your site? It would be much easier for us to help if we could see what's happening on the site.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[sdbroker]

Hi Andrea,

Here's the link to my site: http://www.alexiourealty.com
I want to have about 20 or so pages on the subnav under "COMMUNITIES" on the main Header menu. When I had them there, the one-column subnav list is so long that runs down through the whole site, so besides looking awkward it does really work since the user has to scroll all the way down to see the whole list. I know that there are several plugins (Umber Menu, etc.) that can solve that, but I really like the menu that I have on the theme and I just wonder how it can be done using css to create a 2 or 3-column subnav.

Thank you,
George

[nutsandbolts]

It's possible, though it's beyond the scope of the support forum to spend time creating a custom solution like that. One thing I would suggest (other than hiring someone to help with the CSS for columns) is maybe dividing the communities so that the first dropdown has options like "Northern San Diego," "Eastern San Diego," etc. (or whatever makes sense for the area) and then each of those has its own dropdown. That would achieve the same goal of breaking up the nav so it doesn't take up the entire length of the page.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[sdbroker]

I thought about dividing them like you suggested (as a matter of fact that's how I have it on my other almost identical site), but for this site I prefer to have them show within just one hover from the parent menu. As long as it's possible though to be done in css as you said, sooner or later I'll figure it out! 🙂 I just need an idea on how to start...
Thank you!

[facupuig]

Hi there sdbroker did you figured out how to have 2 columns?
Thank you

[nutsandbolts]

Look at the plugin UberMenu - it's a nice one for putting submenu items into multiple columns.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[facupuig]

Thank you Andrea!

[sdbroker]

It is my understanding that UberMenu only works as a Primary or Secondary menu... so it doesn't work if you need it for a right header custom menu. Tried it and it doesn't work. UberMenu works fine if you want to use a primary menu under the header instead of the header right custom menu.

[Author]

Posts