Sub Menu Columns - Creativity

Hey,

I am trying to do a multi column layout on submenu items on the subpages of the Creativity Wordpress theme.
Is there a way to accomplish this as I saw it in Quark ecommerce theme and tried to replicate using the menu-cols-2 etc CSS Class.

Any help would be greatly appreciated.

Kind Regards

Hi,

The Creativity theme dosen't support multicolumn menu.
Try to add the following custom css code (but it's from other theme so I can't guarantee that it will work properly)

Code: Select all

/* Menu columns */
.menu-cols-2 > .sub-menu,
.menu-cols-3 > .sub-menu,
.menu-cols-4 > .sub-menu {
   padding-top: 0!important;
}
.menu-cols-2 > .sub-menu {
   width: 340px!important;
}
.menu-cols-3 > .sub-menu {
   width: 510px!important;
}
.menu-cols-4 > .sub-menu {
   width: 680px!important;
}
.menu-cols-2 > .sub-menu > ul,
.menu-cols-3 > .sub-menu > ul,
.menu-cols-4 > .sub-menu > ul {
   display: table;
   padding-bottom: 0!important;
   width: 100%;
}
.menu-cols-2 > .sub-menu > ul > li,
.menu-cols-3 > .sub-menu > ul > li,
.menu-cols-4 > .sub-menu > ul > li {
   border-left: 1px solid #eee;
   display: table-cell;
   padding-bottom: 10px!important;
   padding-top: 14px!important;
   width: 50%;
}
.menu-cols-2 > .sub-menu > ul > li:first-child,
.menu-cols-3 > .sub-menu > ul > li:first-child,
.menu-cols-4 > .sub-menu > ul > li:first-child {
   border-left: none;
}
.menu-cols-3 > .sub-menu > ul > li {
   width: 33.333333%;
}
.menu-cols-4 > .sub-menu > ul > li {
   width: 25%;
}
#main-menu .menu-cols-2 > .sub-menu > ul > li > a,
#main-menu .menu-cols-3 > .sub-menu > ul > li > a,
#main-menu .menu-cols-4 > .sub-menu > ul > li > a {
   color: #444!important;
   font-size: 13px;
   font-weight: bold;
   padding: 7px 0;
   text-transform: uppercase;
}

#main-menu .menu-cols-2 > .sub-menu > ul > li > a:hover,
#main-menu .menu-cols-3 > .sub-menu > ul > li > a:hover,
#main-menu .menu-cols-4 > .sub-menu > ul > li > a:hover {
   color: #d82731!important;
}

#main-menu .menu-cols-2 > .sub-menu > ul > li > .sub-menu,
#main-menu .menu-cols-3 > .sub-menu > ul > li > .sub-menu,
#main-menu .menu-cols-4 > .sub-menu > ul > li > .sub-menu {
   border: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   -ms-box-shadow: none;
   -o-box-shadow: none;
   box-shadow: none;
   display: block!important;
   height: auto!important;
   left: 0!important;
   margin: 0 -20px!important;
   opacity: 1!important;
   position: static!important;
   width: auto!important;
}