Styling main menu by adding multiple columns

Hello.

Latest themes, such as University use multiple columns per menu item in the main menu, which is really stylish. Is this possible with older themes such as Music State?

Thanks.

Hello,

Try to add the following code into the theme’s css/override.css file (make sure to enable the “Use the override.css file” option in Template options > Advanced in the WordPress backend)

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


instead of "#main-menu" use "#gk-header-nav .menu" css selector.

Then, try to use this css classess for the columns:
https://demo.gavick.com/wordpress/game/?page_id=1631

Thank you mate!

Helpful as always..