Menu like Storefront Template

Is it possible to make the menu in Shop and Buy like the menu in Storefront? I am mainly asking about the multiple columns in the Storefront menu.

Yes, please just use Classic menu instead of Overlay menu and you will get regular menu with support for columns etc.

ok, sorry, i guess my question is really "How can i set up the columns in the menu"? Do you have a help page on this somewhere?
Thanks

sorry, just noticed this is in the joomla forum and I am using wordpress shop and buy. any help doc on how to create the columns menu in wordpress is appreciated.

I'll send topic to our moderator of WP forum.

Hi,

Generally, ShopAndBuy WP theme doesn't have support for the menu with columns, you can try to add it if you want. Please check this article how to use these columns:

http://www.gavick.com/demo/wordpress/game/?page_id=1631

You'll have to add this code into override.css: (first enable this override option from Template Options -> Advanced tab)

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;
}