Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 12, 2016 at 10:25 pm #685394
    smlsit

    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.

    September 12, 2016 at 10:30 pm #685395
    Guenni007

    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

    September 12, 2016 at 10:34 pm #685400
    smlsit

    That was it. Thank you!

    September 12, 2016 at 10:37 pm #685403
    smlsit

    Is there a similar piece of code for a non-mega menu top level menu item?

    September 12, 2016 at 10:48 pm #685409
    Guenni007

    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;
}
    September 12, 2016 at 11:21 pm #685411
    smlsit

    .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.

    September 13, 2016 at 1:19 am #685445
    Guenni007
    .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
}
    • This reply was modified 9 years, 1 month ago by Guenni007.
    September 14, 2016 at 6:54 am #686160
    Rikard

    Hi @smlsit,

    Did you have any luck with the suggestions from @Guenni007?

    Regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.