Mega Menu sublist in 2 columns

Hi,

I use the Nop Mega Menu plugin with setting "Infinite categories sublist".

When we have a categorie with many subcategories (more than 20), the list goes below the page and we can't see all.

My question is : how to set this up in 2 columns to see all the list ?

http://nsa38.casimages.com/img/2015/06/12/150612045215132276.jpg

Thanks a lot by advance for your answer(s).

G.

Hi,

is there no solution ?

Hi there,

In your case you have at least two options:
first is to use scroll (when the categories are too much the scroll will show and the customer can scroll up and down along the list). For this purpose you must add following styles in your 'mega menu' plugin css-file:
.mega-menu
.sublist {
    max-height: 100px;
    overflow: scroll;
}
It`s up to you (and your theme design) what will be the value against 'max-height' (this will be the visible menu, so you can use any different value which will satisfy your needs).

The other option (the one with two columns) it`s possible do be done but it`s more complicated to be done properly.   I will try to be as clear as possible, so you can do it right.
First you need to decide how much width will have every single list item from the infinite list drop down. For example I`ll use 130px width. In this case the wrapper box should be 260px width.

.sublist.first-level {
    width: 260px;
}

.sublist.first-level > li {
    
    float: left;
    width: 130px;
} - like that I am making every element 1/2 with of it`s parent width.
Finally you need to add this code:

.sublist.first-level > li:nth-child(2n+1){cleat:both;}

.first-level .sublist {
    z-index: 1;
}

Hope all this to be useful for you.