Best Answer

Custom breadcrumb bar using CSS

  • 22 December 2022
  • 2 replies
  • 166 views
R
Rank
Userlevel 4
Badge +1

Hi, I’m looking for help with CSS.

I would like to put a link to our main catalog on the right side of the breadcrumb bar. Simply the word catalog and when you click the word it takes you to the catalog page.

Anyone know the CSS to make this happen?

icon

Best answer by Bfarkas 24 December 2022, 23:15

View original

2 replies

Bfarkas
Rank
Userlevel 7
Badge +3

Hi - CSS is not a solution for this. We abuse it around here I know, but the only way to do waht your asking would be to use a pseduo-class like :after, which is not in the DOM, and use the content CSS to add, but that will only display plain text, not HTML so you could add text but not a link:

The only other route would be a script, but those are not supported either unfortunately. Might just want to consider some sort of quick links widget that you include on all your custom pages.

B
Rank
Userlevel 3
Badge

Because the breadcrumbs are all messed up and don’t link correctly I hid them instead. The only way I could target the breadcrumb bar was with CSS and the following code. 

 

/** -------------------------------------------
This removes the breadcrumbs but keeps home by removing the items from the breadcrumb list
(since they are inaccurate)
**/ 

 

.hierarchical-breadcrumbs li:nth-child(2){
    visibility:hidden;
}
.hierarchical-breadcrumbs li:nth-child(3){
    visibility:hidden;
}
.hierarchical-breadcrumbs li:nth-child(4){
    visibility:hidden;
}
.hierarchical-breadcrumbs ui-icon {
    visibility:hidden;
}

Reply


Terms & ConditionsCookie settings