Two Column Dropdown Menu

Community Forums Forums Design Tips and Tricks Two Column Dropdown Menu

This topic is: not resolved

This topic contains 4 replies, has 3 voices, and was last updated by  BlueSunInc 1 year, 3 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #40496

    BlueSunInc
    Participant
    Post count: 21

    Does anyone know how to create a dropdown menu in the navigation that’s two columns or more? I have a client with a LOT of items in the dropdown menu and she’d like them to show in shorter, multiple columns (because she’ll be adding to this in the future). From what I’ve researched, it’s a complex thing to do, but this is for themes other than Genesis. Has anyone done this with Genesis before? Thanks.

    #40527

    Ozzy
    Participant
    Post count: 213

    some of it will depend on the theme you’re using and how the menu is set up, but some CSS should do the trick.


    #40528

    BlueSunInc
    Participant
    Post count: 21

    Thanks, and that’s what I need to know next. I have her set up on the Backcountry theme. Also, when hovering over the secondary navigation buttons and going to click on the dropdown items, the dropdowns disappear really quickly. Is there any way to fix that? It’s kind of frustrating trying to get the cursor placed just so, so that the dropdown stays.

    #40562

    braddalton
    Participant
    Post count: 9223

    You could install a mega menu http://wordpress.org/extend/plugins/jquery-mega-menu/


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #40567

    BlueSunInc
    Participant
    Post count: 21

    Thanks Brad, but the plugin didn’t make sense to me. I couldn’t see how to set it in the actual navigation bar and not in a custom menu in the widget section.

    However…I did find this snippet of code I added to the bottom of the CSS and that solved the problem right away:

    `.sub-menu{display:inline-block; width:325px !important;}`

    `.sub-menu li{width:50% !important;}`

    `.sub-menu li a:hover{color:#FFFFFF;}`

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

    One problem solved…now does anyone know how to keep the dropdowns from disappearing the second I move the cursor to click on one?

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

You must be logged in to reply to this topic.