Keep parent category nav highlighted

Dazzling
1

Apologies if this has been covered elsewhere, I have searched but not finding an answer. Maybe my terminology isn’t correct or it just hasn’t been covered yet?

Anyway, on to the question…

I am looking for a way to keep the parent category selected in the main navigation while viewing one of the child products within that said category.

Any help will be greatly appreciated.

Geoff

2

Hi @1066geoff,

I hope you are well today and thank you for your question.

You can achieve this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Apperance -> Theme Options -> Other -> Custom CSS

.navbar-nav li.current-menu-ancestor > a {
  background-color: #81d742;
  border-color: #81d742;
  color: #fff;
}

Best Regards,
Movin

3

Hi Movin and thank you very much for the suggestion.
Unfortunately it didn’t work for my site.

What I ended up with in the end is as follows, and seems to work.
It might be of use to someone else so thought I would paste the solution here.

.current-menu-item, a .current_page_item a, .current-product_cat-ancestor a, .hfeed.site .current-product-ancestor.menu-item-146 a {
  background-color: #1fa67a;
  color: #fff !important;
}
4

Hi @1066geoff,

I have tested it on my test adding the provided code in the style.css file of the child theme and it worked fine for me without any issue.

It seems the theme Custom CSS option is not saving the symbol > in the shared code correctly.

You can instead try using it on your site by adding the shared code in the style.css file of your child theme or using the following Simple Custom CSS plugin.

Cheers,
Movin