Highlighting active parent menu item on subitem opening

Hi Yigit,
I have the reverse proxy setup to the local devsite running, so it’s now accessible with password from the outside.
Let me know when you have time and are a little less busy, then I can create a temporary login without password link for you.
No hurry though (it’s just a dev site for now)
Rob

• This reply was modified 5 years, 8 months ago by rob2701.

Hi,

I added this CSS below to clarify the problem.

There are 3 different portfolios (= categories/taxonomies).
– Each portfolio has a separate menu item (top level, not nested)
– Each portfolio grid on each page is restricted to display 1 portfolio category
– ALL portfolio items have been assigned a proper category
– ALL portfolio items have proper parent set for breadcrumbs

Problem:
Even though the CSS “should” be restricted to each separate menu item ID, still on opening a portfolio item ALL portfolio cats/taxonomies/menu-entries get highlighted…

When you can, please help me understand this behaviour, because I’m lost now.

/* -------------------------------------------------------------- */
/* TEST PORTFOLIO ITEM CAT PARENT HIGHLIGHT BELOW */
/* TEMP DIFFFENT COLOURS TO SEE THE DIFFERENCES */

/* Portfolio A - Menu ID = 765 */
/* hover over "Remove" button of menu item to see ID */
/* HIGHLIGHTS ALL PORTFOLIO CATS even while restricted to only this menu item */
/* highlight Portfolio menu item when portfolio item open */

body.single-portfolio .main_menu ul li#menu-item-765 a .avia-menu-text  {
/*  color: #719430 !important; */
  color: blue;
}
/* highlight bottom border when menu top header */
body.single-portfolio .main_menu ul li#menu-item-765 a {
/*  border-bottom: 2px solid #719430 !important; */
  border-bottom: 2px solid blue;
}

/* Portfolio B - menu ID = 764 */
/* hover over "Remove" button of menu item to see ID */
/* HIGHLIGHTS ALL PORTFOLIO CATS even while restricted to only this menu item */
/* highlight Portfolio menu item when portfolio item open */
body.single-portfolio .main_menu ul li#menu-item-764 a .avia-menu-text {  
/* color: #719430 !important;  */
  color: orange!important;
}
/* highlight bottom border when menu top header */
body.single-portfolio .main_menu ul li#menu-item-764 a {
/*  border-bottom: 2px solid #719430 !important; */
  border-bottom: 2px solid orange;
}

/* Portfolio C - menu ID = 1038 */
/* hover over "Remove" button of menu item to see ID */
/* HIGHLIGHTS ALL PORTFOLIO CATS even while restricted to only this menu item */
/* highlight Portfolio menu item when portfolio item open */
body.single-portfolio .main_menu ul li#menu-item-1038 a .avia-menu-text  {
/*  color: #719430 !important; */
  color: purple;
}
/* highlight bottom border when menu top header */
body.single-portfolio .main_menu ul li#menu-item-1038 a {
/*  border-bottom: 2px solid #719430 !important; */
  border-bottom: 2px solid purple;
}

• This reply was modified 5 years, 8 months ago by rob2701. Reason: corrected some typos

Solved the issue myself gents. One less request in the flood :-)

Menu now highlights only the proper portfolio-cat/menu-item on opening a single portfolio item.

Here’s how I did it in case someone else meets the same problem:

Child theme functions.php:

// Highlight only proper portfolio CATEGORY/MENU ITEM when single portfolio item open
// instead of all portfolio cats being highlighted
function add_category_name($classes = '') {
   if(is_single()) {
      $category = get_the_terms($post->ID, 'portfolio_entries');
      $classes[] = 'category-'.current($category)->slug; 
   }
   return $classes;
}
add_filter('body_class','add_category_name');

Child theme Quick CSS:

/* highlight only proper Portfolio menu item (category) when single portfolio item open */
/* hover over "Remove" button of menu item to see the menu IDs */
body.single-portfolio.CATEGORY-SLUG-A .main_menu ul li#menu-item-765 a .avia-menu-text,
body.single-portfolio.CATEGORY-SLUG-B .main_menu ul li#menu-item-764 a .avia-menu-text,
body.single-portfolio.CATEGORY-SLUG-C .main_menu ul li#menu-item-1038 a .avia-menu-text {
  color: #719430 !important;
}
/* highlight bottom border when menu top header */
body.single-portfolio.CATEGORY-SLUG-A .main_menu ul li#menu-item-765 a,
body.single-portfolio.CATEGORY-SLUG-B .main_menu ul li#menu-item-764 a,
body.single-portfolio.CATEGORY-SLUG-C .main_menu ul li#menu-item-1038 a {
  border-bottom: 2px solid #719430 !important;
}

You can close this request.
Kind regards,
Rob

• This reply was modified 5 years, 8 months ago by rob2701. Reason: corrected small typo

Hi,

Playing around with it some more, I have found that I need to choose only subcategories (children) for display. Then sorting works as it should. BUT: in my mind this is a bit of a convoluted workaround and it creates other problems.
Now I need to target each subcategory in the CSS separately to get proper menu highlighting. And the highlighting behaves as if it were a subMENU item (which it is not, it is just a subcategory in the portfolio with no menu item set for it), that is to say the highlight bottom color becomes attached directly to the menu text instead of being on the bottom of the header…And how do I solve that?
And what happens if I have another portfolio category B which has a subcategory name equal to the one in portfolio category A?

I understand that it’s a difficult situation because the theme wants to give the user the liberty to freely choose any combination of portfolio categories to display in the grid. Fine if we’re only talking about parents (same level). But here we have 1 parent with a few children.

<spockmode on>The resulting behaviour is highly illogical, captain!</spockmode off>

This is what I have logically presented:

FRUITS
Apples
Pears
Bananas
Sweet
Sour

First:
I would expect that choosing FRUIT to display in the portfolio would include the subcategories.
After all, they are only for sorting purposes WITHIN the main portfolio cat. That’s why they are set as children.
But: I need to choose all children to get sorting below the parent. Doesn’t make sense (at least not to me). I would understand it if the children were parents also, but they’re not.

Second:
This complicates matters enormously, because a “Granny Smith apple” would be:
Fruit / Apple / Sour, belonging to 3 categories (1 parent and 2 children).
Setting the subcats specifically to be CHILDREN should be enough for the display and the sorting to understand what it needs to do?

So my question is:
Wouldn’t it be better and easier to have “parent includes children” as the default and then treat child exclusions as exceptions?
To my mind (and I am not a coder, mind you) this seems the opposite, i.e. catering for the exceptions and then ending up with an illogical default. Or, in other words, it seems parentA+childrenA1+A2+A3 is treated the same as parentA+parentE+parentG.
Supermarkets may put tomatoes with the vegetables, but they’re still technically a fruit :)

Or maybe I’m doing something wrong not understanding the theme logic properly.
But please correct me if I’m wrong. I love to learn :)

So long story short:
I solved the highlighting issue when there is no sorting enabled (only main portfolio category chosen for display).
Appreciate any help you can give me to sort out the highlighting menu bottom colour workaround (when sorting is enabled, i.e. subcategories chosen for display).

Thanks in advance
Rob