Thanks @tuanphan for the code, it works, but I wish I could get it to show on the product detail pages instead of the SS breadcrumbs. For anyone that wants to highlight the categories on hover, I added this to mine (change 'white' to your desired highlight color, 'black' to your text color, and '|' [pipe] to your separator character):
/**** Highlight hovered category from tuanphan code ****/
.nested-category-tree-wrapper>ul>li:not(:last-child)> a:hover {
color: white !important;
}
.nested-category-tree-wrapper>ul>li:not(:last-child)> a:hover:after {
color: black !important;
content:"|";
}
.nested-category-tree-wrapper>ul>li:last-child> a:hover {
color: white !important;
}
Here is the complete tuanphan code I'm using with the separator additions (I tightened mine up a bit so you might have to tinker with the margin and padding):
/* Show category nav links credit tuanphan */
div.nested-category-tree-wrapper {
display: flex !important;
float: none !important;
min-width: 100% !important;
max-width: 100% !important;
margin-right: 0 !important;
}
section.products.collection-content-wrapper.products-list {
flex-direction: column !important;
display: flex;
}
.nested-category-tree-wrapper>ul {
width: 100% !important;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap !important;
}
.nested-category-tree-wrapper>ul li {
margin-left: 0.5vw;
}
nav.nested-category-breadcrumb {
display: none !important;
}
ul.nested-category-children {
display: none !important;
}
a.category-link.root {
padding-top: 0px !important;
}
li.category-item:not(:last-child) a:after {
content: "|";
padding-left: 5px;
}