Tagged: megamenu
I’m having trouble coming up with the right search keywords to research this problem, I’m sure it’s been addressed before. Sorry.
I have wide multi-column mega menus. When the user is looking at the menus, it’s possible to forget which top level menu they are under since multiple one display in the same wide area. Is there code that can add styling such as bolding to the top level menu item that is associated to the mega menu being shown at the time?
Hope that makes sense.
Thanks, in advance.
well there is a class added to the opend mega-menu:
.open-mega-a {
text-transform: uppercase;
color: #900 !important;
}
font-weight is bold per default i think
That was it. Thank you!
Is there a similar piece of code for a non-mega menu top level menu item?
try this :
.header_color .main_menu ul:first-child li a:hover {
color: #900 !important;
}
and if you like to influence the active (current) state:
.header_color .main_menu ul:first-child li.current-menu-item > a, .header_color .main_menu ul:first-child li.active-parent-item > a {
text-transform: uppercase !important;
}
.header_color .main_menu ul:first-child li a:hover
This one almost does the job, but the styling goes away when you move your mouse down the menu.
.header_color .main_menu ul:first-child li:hover.menu-item-top-level > a {
color: #900 !important;
text-transform: uppercase
}
and if you only want to have it for top level links with submenu:
.header_color .main_menu ul:first-child li:hover.menu-item-has-children.menu-item-top-level > a {
color: #900 !important;
text-transform: uppercase
}