Bold active product breadcrumb and on hover

cinnamoncat · September 4

Hello,

1) How can I bold the product category breadcrumb on hover? I would like it to behave like the main navigation menu.

2) How can I bold the active item's name?

Edited September 4 by cinnamoncat
Pressing Enter published the post instead of letting me enter a paragraph break

Ziggy · September 4

Try this Custom CSS:

.products.collection-content-wrapper .nested-category-breadcrumb-list-item .nested-category-breadcrumb-link a:hover {
  font-weight:600;
}

What do you mean by active, I don't see an active state on these they click through to another page.

cinnamoncat · September 4

The code did not work.

For active, please refer to the screenshot that shows "Fire Pasties" highlighted. That is the active/current item that a shopper is viewing.

Ziggy · September 5

You can try this:

.products.collection-content-wrapper .ProductItem-nav-breadcrumb-link:last-child {
  font-weight:600;
}

cinnamoncat · September 5

Not sure if it's because I moved the breadcrumb to the left side bar, but that code did not work either 😕

cinnamoncat · September 6

This worked for bolding the breadcrumbs. (Decided to ditch the hover aspect):

.nested-category-breadcrumb-link {
  font-weight: bold;
}

This worked for making all categories in the side bar/menu/navigation bold:

.category-link {
  font-weight: bold;
}

Recommended Posts