Code to show main nav as active when on pages that are links to shop category pages?

Hello all,

In the main nav on the website I'm working on, two of the pages in the main nav are just links to specific category pages in the shop.  I removed the "all' from the shop. The client wants to land on "best sellers" when people click the shop button in the top nav. The issue is that the "shop" nav doesn't show as active when in the store using this method. Is there some code I could use that I could insert into each category page for the shop, that would show the top/main nav as active when visiting that page? Hopefully this makes sense. 

Hi,

What is your site url?

12 hours ago, tuanphan said:

Hi,

What is your site url?

https://www.lewisrossignolart.com

You mean when users is on this page

https://www.lewisrossignolart.com/original-artwork/best-sellers

will make "Shop" item change color + add a line, like this?

4 hours ago, tuanphan said:

You mean when users is on this page

https://www.lewisrossignolart.com/original-artwork/best-sellers

will make "Shop" item change color + add a line, like this?

Exactly. That's precisely what I'm trying to do. 

Thank you so much. Worked exactly as I'd hoped it would. 

I forgot, the code doesn't work on mobile, you can use this new code

<script>
  if (document.location.pathname.indexOf("/original-artwork/") == 0) {
    document.querySelector('body').classList.add('shop-artwork')
}
</script>
<style>
  body.shop-artwork header#header div.header-nav-item:first-child [href*="original-artwork"] {
    color: #f56400 !important;
    text-decoration: line-through !important;
}
   body.shop-artwork header#header div.container.header-menu-nav-item:first-child [href*="original-artwork"] {
    color: #f56400 !important;
    text-decoration: line-through !important;
}
</style>