No mega menu

Gavick themes i have used have option of mega menu. Tries that with this theme but it didnt work.
Like CSS - menu-cols-2

How to change override css so that I can get two column menu - if i insert css code in "CSS Classes (optional)" in menu item?

Hi,

This feature is not included in TechNews theme, but the following thread should be helfpul:
https://www.gavick.com/forums/music-sta ... umns-47097

Tried that link and other changes i could think of, but i failed. in another post i am goving you my login by private message. Please help me in this too.

I can't see css code for the menu column on your website..
instead of "#main-menu" use ".nav-menu" css selector.

Tried this - https://www.gavick.com/forums/music-sta ... umns-47097
and also tried changes you suggested.
Please recheck the override.css now. Its there.
Regards

Now i can see the code - but there should be spaces between .nav-menu and other selectors:

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%;
}
.nav-menu .menu-cols-2 > .sub-menu > ul > li > a,
.nav-menu .menu-cols-3 > .sub-menu > ul > li > a,
.nav-menu .menu-cols-4 > .sub-menu > ul > li > a {
   color: #444!important;
   font-size: 13px;
   font-weight: bold;
   padding: 7px 0;
   text-transform: uppercase;
}

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

.nav-menu .menu-cols-2 > .sub-menu > ul > li > .sub-menu,
.nav-menu .menu-cols-3 > .sub-menu > ul > li > .sub-menu,
.nav-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;
}


and unfortunately TechNews menu has different html structure.. so this code won't work properly.

Right. Not working. Can you resolve this at your end?

Sorry, but it's too much modifications (beyond our technical support), in the Game or other themes with columns there's another menu walker used.