Tagged: , , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 13, 2014 at 2:41 am #236625
    BeeCee

    Hi,

    I have hover and active effects for the items on the main menu. I would like them to show active, too, while being on their grandchild pages.
    Would you mind helping me with the CSS to assign this?

    This works only for the child pages of the main menu items, but the main menu item is not highlighted active, when I am at a grandchild page:

    .header_color .main_menu ul:first-child > li a:active, .header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a, .header_color .main_menu ul:first-child > li.active-parent-item > a {
    color: #A882BD !important;
}

    [Note: my site is offline, because it is not yet ready]
    Thanks in advance.

    March 14, 2014 at 4:11 am #237363
    Ismael

    Hi COLORIT!

    Please try this one:

    .header_color .main_menu ul:first-child > li.current-menu-ancestor > a {
color: #A882BD !important;
}

    Cheers!
    Ismael

    March 14, 2014 at 12:16 pm #237551
    BeeCee

    Thank you, but it shows the little line + arrow below the active main menu item, but the word itself is not highlighted.

    I have tried this then:

    .header_color .main_menu ul:first-child > li.current-menu-item > a {
color: #A882BD !important;
}

    but this has no effect: the active main menu item is not highlighted, when I’m on a grandchild page of it.

    March 14, 2014 at 12:33 pm #237562
    BeeCee
    This reply has been marked as private.
    March 14, 2014 at 7:11 pm #237787
    Ismael

    Hey!

    Please use this instead:

    .header_color .main_menu ul:first-child > li.current-page-ancestor > a {
color: red !important;
}

    This should highlight the ancestor menu item.

    Best regards,
    Ismael

    March 14, 2014 at 7:56 pm #237797
    BeeCee
    This reply has been marked as private.
    March 18, 2014 at 9:48 am #239237
    Dude

    Hi!

    You can use the current-page-ancestor class to highlight it:

    
#header .sub_menu ul:first-child > li.current-page-ancestor > a {
color: red !important;
}

    Best regards,
    Peter

    March 18, 2014 at 5:58 pm #239477
    BeeCee

    Thank you very much for your help, works fine now!

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Main menu item highlighted, when being on a grandchild page’ is closed to new replies.