Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Sub-menu two columns

Home Forums Support Sub-menu two columns

Viewing 15 posts - 16 through 30 (of 33 total)
  • Author
    Posts
  • #252695
    brickintime

    I tried what you gave me here, but it’s still not working. I don’t see any difference or any change.

    Do I need to to write the class just in the parent, to the child links or both. Either way is not working. But for better understanding it, that would be helpful too.

    #252771
    Tom
    Lead Developer
    Lead Developer
    #254667
    brickintime

    This one really worked and looks great! Thank you really much.
    the one before also worked when I put an !important behind everything, but I guess that’s not something you should use all to often.
    I just saw the two columns once I had a bad cellular reception and the site was loading really slow. So I knew the code must worked some way, but was overwritten or something by something else.
    Long story short. It’s perfectly working now! ๐Ÿ™‚

    #254733
    Tom
    Lead Developer
    Lead Developer

    Awesome! Glad you got it working ๐Ÿ™‚

    #254761
    brickintime

    I think I might have been a bit to fast with the good news…
    Thing is.. now EVERY other sub menu is also 410px wide and that looks really odd!
    Is there a way to just address the sub-menu-columns class?

    #254892
    Tom
    Lead Developer
    Lead Developer

    You can give the parent item a class, and then this would be your CSS:

    .main-navigation ul li.my-parent-item-class ul.sub-menu {
        width: 410px;
    }
    
    li.my-parent-item-class ul.sub-menu li.sub-menu-columns {
        display: inline-block;
        float: left;
        width: 200px;
    }
    
    li.my-parent-item-class ul.sub-menu li.sub-menu-columns:nth-child(odd) {
        float: left;
        margin-right: 10px;
    }
    
    li.my-parent-item-class ul.sub-menu li.sub-menu-columns:nth-child(even) {
        float: right;
    }
    #257088
    brickintime

    Now it is working! ๐Ÿ™‚

    #257115
    Tom
    Lead Developer
    Lead Developer
    #257189
    Mosche

    I’m so glad that a solution was found.
    This is a really nice effect.
    Especially for products pages with lots of products.
    Will be using it soon.

    #475563
    Rodolfo

    Hi… I tried to implement this solution, no success…

    My website is http://www.computar.com.br and I would like to have two columns under “Mรณdulos” menu.

    So, I added “sub-menu-columns” as a class in this item (on menu), and then, copy and paste css below, but is not working.

    By the way, as BrickInTime did, others sub-menus should have widht=225…

    After two hours, time to give a break… Later I try to find the problem… If you could help me, I thank you!

    .main-navigation ul ul
    {
       width: 225px;
    }
    
    .main-navigation ul li.my-parent-item-class ul.sub-menu {
        width: 5600px;
    }
    
    li.my-parent-item-class ul.sub-menu li.sub-menu-columns {
        display: inline-block;
        float: left;
        width: 225px;
    }
    
    li.my-parent-item-class ul.sub-menu li.sub-menu-columns:nth-child(odd) {
        float: left;
        margin-right: 10px;
    }
    
    li.my-parent-item-class ul.sub-menu li.sub-menu-columns:nth-child(even) {
        float: right;
    }
    #475736
    Leo
    Staff
    Customer Support
    #477133
    Rodolfo

    Hi Leo…

    I tried to use Mega Menu…

    But, it changes its position, backcolor, etc… I just uninstalled it.

    If I could create two columns, using css, it would be great… but if is not possible, it is ok…

    #477135
    Leo
    Staff
    Customer Support
    #477140
    Rodolfo

    ops, my mistake Leo…

    I think you was talking about “Mega Menu” – Plugin….

    I will try it… give me a couple hours and I will tell you the result…

    #477360
    Rodolfo

    Great Leo… it works!

    Now I’m trying to customize it!

    I replace width: 100% to 600px… and delete left: 0 !important;

    nav .main-nav .mega-menu > ul {
    position: absolute;
    width: 600px;
    }

    I think, it is ok now! Thank you!

Viewing 15 posts - 16 through 30 (of 33 total)
  • You must be logged in to reply to this topic.