Mega Menu Additional class

Hello,

can i style different links on megamenu with "Additional class"? How it works?

Holger

Any Ideas??

I wont on mainmenu (megamenu) different colors (mouse over) vor different links. is there a way with "additional class"?

Yes, you can do it with that option. You have to use similar selectors as for normal menu item, but you have to add your class to selector to get individual styling

Thank you for answer! Can you give me a example please? What i whant to do is: For every Link in Mainmenu from Megamenu a special border-color for explore column.


Like This:

please try:

Code: Select all

.gk-megamenu .YOUR_CLASS .childcontent-inner-wrap{
   border:3px solid #000;
}


Hello Dziudek,

Thank you very mutch!! It works fine!! Cool!!

Next Idea:

mouse over effekt on submenü is in style1.css:

Code: Select all

.gk-megamenu ul.level1 li.mega a.mega { background:#484848 url('../images/style1/submenu_bg.png') no-repeat 0 top }


For Mega Menu Additional class i try:

Code: Select all

.gk-megamenu .YOUR_CLASS .ul.level1 li.mega a.mega { background:#484848 url('../images/style1/submenu_bg_RED.png') no-repeat 0 top }


This dont works. Have you an idear?

Hi

It should work fine your code, but you need to add !important rule and naturally need hover pseudo-class:

Code: Select all

.gk-megamenu .YOUR_CLASS .ul.level1 li.mega a.mega:hover { background:#484848 url('../images/style1/submenu_bg_RED.png') no-repeat 0 top!important; }


Cheers

Thank you for your answer. This code dont works! But i hav a look in gk_stuff.css:
here i try this code:

Code: Select all

.gk-megamenu .YOUR_CLASS ul.level1 li.mega a.mega{border:0; color:#3b3b3b; font-weight:bold; display:block; height:25px; line-height:25px; padding:0 7px; font-size:65%; text-transform:uppercase; margin:5px 0 0 0; background:#484848 url('../images/style1/submenu_bg_RED.png') no-repeat 0 top}
.gk-megamenu .YOUR_CLASS ul.level1 li.mega a.mega:hover{background-position:right bottom; color:#fff}


This is the answer. It works fine!!

Next question: Mouse hover in mainmenu (in demo the links Joomla Stuff, Menu, Menu Item...) in differend colors (background img). Any idea?

OK. For maouse over in mainmenu this lines in style1.css are importent. this change top border color (by mouse over):

.gk-megamenu>ul.level0>li:hover,
.gk-megamenu>ul.level0>li.active,
.gk_menu>li:hover,
.gk_menu>li.active,
.gk_menu>ul>li:hover,
.gk_menu>ul>li.active { border-top:1px solid #3a5676; }

I try:

Code: Select all

.gk-megamenu .YOUR_CLASS >ul.level0>li:hover,
.gk-megamenu>ul.level0>li.active,
.gk_menu>li:hover,
.gk_menu>li.active,
.gk_menu>ul>li:hover,
.gk_menu>ul>li.active { border-top:1px solid #ffffff; }


No way! This works for all by active. Is this the right way? Ideas?

example:

Any ideas? It is very important for me.

regards, holger

Try this code:

Code: Select all

.gk-megamenu ul.megamenu.level0 li.mega.YOUR_CLASS.haschild-over.over{
border-top: 3px solid #4B8DA5;
padding-top: 5px;}


So, with this code and with mouse-over "Menu" link this would the result.



The padding is to compensate the border.

Cheers

COOOOOL!! Thank you very mutch!It works!

Next: For "active" i try:

Code: Select all

.gk-megamenu ul.megamenu.level0 li.mega.YOUR_CLASS.li.active{
border-top: 3px solid #4B8DA5;
padding-top: 5px;}


Dont works. Cany you help me again?

OK. I have a way that works:

Code: Select all

.gk-megamenu ul.megamenu.level0 li.mega.YOUR_CLASS.haschild.active{
border-top: 3px solid #4B8DA5;
padding-top: 5px;}


This works fine. But the problem is: I have a navigation (Module mod_mainmenu) on left1 too like a subnavigation. When i click on mainmenu top, the "haschild.active" works "over" and is afte click "active". When i click next on a link on seccond navigation (Module mad_mainmenu) on the left side, the link on Top is never active. (I hope you understand me english is not me best... sorry for that.)Where is here the Problem?

My site is local. I cant give you a link to it. Sorry.

Regards, Holger

Hi again

For active menu, try like this:

Code: Select all

.gk-megamenu ul.megamenu.level0 li.mega.active.last.YOUR_CLASS{
border-top: 3px solid #4B8DA5;
padding-top: 5px;}


Cheers

Hi again,

thank you for answer. Dont works. color change to "normal class".

This works:

Code: Select all

.gk-megamenu ul.megamenu.level0 li.mega.YOUR_CLASS.haschild.active{
border-top: 3px solid #4B8DA5;
padding-top: 5px;}


But the problem is: I have a navigation (Module mod_mainmenu) on left1 too like a subnavigation. When i click on mainmenu top, the "haschild.active" works "over" and is afte click "active". When i click next on a link on seccond navigation (Module mad_mainmenu) on the left side, the link on Top is never active. (I hope you understand me english is not me best... sorry for that.)Where is here the Problem?

Servus! (it is bavarian and means byby