-
Posts
-
Hi guys. So my client wants a two-section site with two different colors for menu items, hovers, etc., using mega menu. I’ve spent a good deal of time and have almost gotten there, but not quite, and not even sure it’s possible.
If you look at http://www.realfreshbuild.com/sandbox2, and hover over SHOP, it and it’s mega menu column titles go to orange. If you hover over ABOUT, you see it and it’s column titles go to green. I did this by targeting the menu item itself:
#menu-item-2641
along with it’s a:hover state and it’s li
The only problem is, when you actually go to one of those pages such as the About page, the About link changes to orange. I’ve tried to target it’s active state but it isn’t working, and making it stay green for it’s children is even harder I think. Is this possible?
Hey kaylesimon,
Try the following to control the activate menu item:
.current-menu-item a .avia-menu-text { color:green !important; }Regards,
RikardThank you Rikard!
That worked on one page but not others, which are still going back to orange when I’m in that section. And it has changed the color of the list in the mega menu to green as well; tried to affect those through ul li, but I feel like I’m just having to do too much coding for this, and probably not doing it well; I think I need to just hire someone rather than keep bothering you guys. Obviously a second colorway in the main menu is not part of the theme (though I imagine it would be something people would use if it were!)
The mega menu is particularly difficult for us newbies to affect; it’s nearly impossible to inspect and you get asked a lot of questions about it. It would be great if you could give us a list of css “calls” that affect all the levels of these.
I wish I could just have set up a menu class and done it that way but that didn’t work either.
#menu-item-2641 a, #menu-item-2641 a {
font-size: 23px;
}
#menu-item-9 li li a, #menu-item-2641 li li a {
font-size: 14px !important;
}
#menu-item-2641 a:hover {
color: #949243 !important;
}
#menu-item-2641 li a {
color: #949243 !important;
}
.current-menu-item a .avia-menu-text {
color:#949243 !important;
}
#header .mega_menu_title {
font-size:15px !important;
}
#mobile-advanced ul a {
font-size: 13px !important;
color: 000 !important;
}
#mobile-advanced li a {
font-size: 13px !important;
color: 000 !important;
}
- The topic ‘Menu with Second Color’ is closed to new replies.