I have been struggling with css to change to differnt background colors for each mega menu link (level 0) and make sub levels to use the same color as its parent level 0. It works fine to change level 0 to different colors using menu additonal class. But for sublevels I have not managed to make it work perfect (or at all) for for all conditions like, active, over, last…
Thanks in advance!
1 answer
May I know which template you’re using? You can post your site’s URL here and turn off Optimize CSS option in template manager. It’s better with a closer look.
Normally, you can use Additional Class to define specific CSS for each menu item. For example, I want to customize CSS for menu item named "Page Offline" in my site (JA University template):
-- I go to backend settings of this menu item and add class offline in Additional Class option.
-- Then add following CSS rule in file: /templates/ja_university/css/menu/mega.css
Code:
/*Custom*/
.ja-megamenu ul.level0 li.mega .offline{
background-color: blue ;
}
/*Active*/
.ja-megamenu ul.level0 li.mega .offline.active{
background-color: red ;
}
/*Hover*/
.ja-megamenu ul.level0 li.mega .offline:hover{
background-color: green;
}
You can see these image:
+ Default:
Attachment 32873
+ Hover
Attachment 32874
+ Active
Attachment 32875
This question is now closed
