Highlight non-linking top level tab when child is active?

  • Hi,

    I have a menu with a non-linking top level tab (a custom link via the Menu options) with three pages added to it as sub-items, like so:

    BOOKS (this is not a page, but a custom menu item)
    – Novels (page)
    – Poetry (page)
    – Stories (page)

    I’m trying to highlight the top level item (BOOKS) when one of it’s children is active (so when one of the three pages is open). I’ve searched everywhere, but I can’t find a way to do that. I have no problem finding the classes that style the three page items, but I cannot find a way to style the top level tab when it’s children are active only.

    Any thoughts anyone?
    Thanks!!!

    • This topic was modified 4 years, 5 months ago by raoulunger.
    • This topic was modified 4 years, 5 months ago by raoulunger.
Viewing 10 replies - 1 through 10 (of 10 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    On my test site, using the twentytwentyone theme, these are the classes applied to a top level menu item when a child menu item’s page is active:

    <li id="menu-item-1770" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-1770">

    so you could style based on current-menu-ancestor or current-menu-parent. Inspect the top level item on your theme when a child item is the current page.

    Thread Starter raoulunger

    (@raoulunger)

    Thanks for the answer. However in this case the top level item is a custom link (made under appearances > menus > custom links). This is normally used to get a top level tab (Books) in the navigation (to group pages under) without there being an actual page ‘BOOKS’. I had found those classes you mention, but they are not assigned to the custom link tab…

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Please provide a link to a page on your site where we can see this. Thanks. Note: Your link will be public and we will not later remove it.

    Thread Starter raoulunger

    (@raoulunger)

    I have clarified the first post. The site is not live yet (and in a sketchy state), but I made a test page to show the menu. It’s in Dutch, but the parent is the custom menu item, the three sub-items link to pages.

    test page is here

    I will remove this link later today.

    • This reply was modified 4 years, 5 months ago by raoulunger.
    • This reply was modified 4 years, 5 months ago by raoulunger.
    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    When I clicked into one of the sub-menu items, I saw https://i.imgur.com/Rzcbc9a.png

    Thread Starter raoulunger

    (@raoulunger)

    Yes, those are the three (sketchy) sub-pages, sorry for that confusion. I have now set up the test menu with three empty pages, to illustrate the issue more clearly:

    test page

    As you can see, the custom tab gets no individual class, even though it was made in the menu dashboard as a custom link.

    Thanks!

    • This reply was modified 4 years, 5 months ago by raoulunger.
    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    When I click on sub-page-2, the “custom tab” item has these classes:

    <li id="menu-item-878" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-878"><a data-ps2id-api="true">Custom tab</a>

    Thread Starter raoulunger

    (@raoulunger)

    I have seen those too, but whichever combination of those classes I try (or single), they always target the entire menu, not just the parent tab.

    I’ve now set-up a second set in the same menu, with a ‘normal’ parent for the subset. The classes assigned are different from the custom link (see below). But in all fairness, I tried to target the normal parent (in the second set) to be highlighted (green) when one of the sub pages are open, but could not get that to work either. Perhaps I’m missing something very obvious in term of css semantics?

    test

    These are the classes assigned (stacked for ease of reading):

    custom item;

    <li id="menu-item-878" class="
menu-item
menu-item-type-custom
menu-item-object-custom
current-menu-ancestor
current-menu-parent
menu-item-has-children
menu-item-878">

    ‘normal’ parent item (notice the use of ‘_’

    <li id="menu-item-893" class="
menu-item
menu-item-type-post_type
menu-item-object-page
current-menu-ancestor 
current-menu-parent
current_page_parent
current_page_ancestor
menu-item-has-children
menu-item-893">
    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    .current-menu-parent {
    color: red;
}

    See https://i.imgur.com/UTokbSM.png

    Thread Starter raoulunger

    (@raoulunger)

    Thanks for your help! That sort of works, probably because I had some other css targeting the individual sub-items. That would explain why the bullets turn red too (suggesting that still the entire menu ‘wants’ to be red).

    .current_page_item a{
	color: green
}

.current-menu-parent {
	color: red;
	border: 1px dotted blue;
}

    Anyway, I’ll give this some further tweeking tomorrow, thank you for your time!

    • This reply was modified 4 years, 5 months ago by raoulunger.
    • This reply was modified 4 years, 5 months ago by raoulunger.
Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Highlight non-linking top level tab when child is active?’ is closed to new replies.