Sub Menu with 4 Columns

[dnadesign]

Hi Weaver/ Scrambler

I saw this option in the Guide 4) Two columns Sub Menus , But I wish to make a four column sub menu Similar to the attached picture

I modified the code as per below in custom CSS. But I clearly haven’t got it right.

@media screen and (min-width:768px) {
/* Set overall width */
ul.sm.wvrx-menu ul, ul.wvrx-menu ul {width:500px !important;}
/* Spread over two columns & top border */
ul.sm.wvrx-menu ul > li, ul.wvrx-menu ul > li {
float:left !important;width:25%;border-top:1px solid black;
}
/* First columns clear and right border */
ul.sm.wvrx-menu ul > li:nth-of-type(4n+1),
ul.wvrx-menu ul > li:nth-of-type(4n+1) {
clear:both;border-right:1px solid black;
}
ul.sm.wvrx-menu ul > li:nth-of-type(4n+2),
ul.wvrx-menu ul > li:nth-of-type(4n+2) {
border-right:1px solid black;
}
ul.sm.wvrx-menu ul > li:nth-of-type(4n+3),
ul.wvrx-menu ul > li:nth-of-type(4n+3) {
border-right:1px solid black;
}
}

I am using Xtreme plus and a link to the test site is https://dna270.dnaonline.co.za/

Would appreciate your help

[scrambler]

It is working and creating 4 columns, but you have only added 3 sub menus, so only three are visible.

If I add another 5 sub menus, it shows up as two rows of 4

[Author]

Posts