[Resolved] Sub-menu two columns

Home Forums Support [Resolved] Sub-menu two columns

Home Forums Support Sub-menu two columns

Viewing 15 posts - 1 through 15 (of 33 total)
  • Author
    Posts
  • #117341
    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.

    #117379
    Tom
    Lead Developer
    Lead Developer

    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/

    #117578
    Martin
    #117583
    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.

    #117644
    Tom
    Lead Developer
    Lead Developer

    That could definitely work, Martin ๐Ÿ™‚

    Thanks for the tip, Damiaan!

    #245168
    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”.

    #245214
    Tom
    Lead Developer
    Lead Developer

    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?

    #245228
    brickintime

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

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

    #245308
    Tom
    Lead Developer
    Lead Developer

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

    #245508
    brickintime

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

    #245607
    Tom
    Lead Developer
    Lead Developer

    You’re welcome ๐Ÿ™‚

    #245651
    brickintime

    Hm…
    It didn’t work

    #245756
    Tom
    Lead Developer
    Lead Developer

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

    #250202
    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;
    }
    #250267
    Tom
    Lead Developer
    Lead Developer

    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;
    }
Viewing 15 posts - 1 through 15 (of 33 total)
  • You must be logged in to reply to this topic.