How to Display Submenu in 2 Columns instead of one?

Community Forums Forums Design Tips and Tricks How to Display Submenu in 2 Columns instead of one?

This topic is: not resolved

This topic contains 8 replies, has 3 voices, and was last updated by  sdbroker 7 months, 1 week ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #68876

    sdbroker
    Participant
    Post count: 106

    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!

    #69200

    nutsandbolts
    Keymaster
    Post count: 3176

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #69310

    sdbroker
    Participant
    Post count: 106

    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

    #69319

    nutsandbolts
    Keymaster
    Post count: 3176

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #69329

    sdbroker
    Participant
    Post count: 106

    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!

    #96454

    facupuig
    Participant
    Post count: 4

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

    #96520

    nutsandbolts
    Keymaster
    Post count: 3176

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


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

    #96561

    facupuig
    Participant
    Post count: 4

    Thank you Andrea!

    #96640

    sdbroker
    Participant
    Post count: 106

    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.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.