How to Hide The Home Link In The Page Breadcrumb
What are breadcrumbs?
The term breadcrumbs has long been used in technology - not only in hardware and systems design, but also in web design. It is a term used to indicate a path so you can trace your route back from where you are to how you got here.
While we use the term very often in technology, it certainly isn't the only place it is used. Law enforcement has used the term for a long time to trace back the activities in an investigation. The term breadcrumbs itself likely dates back to the 18th century and the story of Hansel and Gretel.
How do we hide the 'Home' link?
Often, breadcrumb tools display the trail starting with the site home page. But that can be redundant with your site navigation bar as two "Home" links will be show, in addition to the ability to get to your home page via the site icon. So it is a common practice to hide the 'Home' link in the breadcrumb. But although a common practice, it isn't always easy.
Formating the breadcrumb bar can be a little bit tricky and requires specific CSS code that is linked to the specific breadcrumb tool that you are using. If you are using LearnDash in combination with the Uncanny Owl breadcrumb tool, here's some CSS code you can implement in order to hide the 'Home' link.
/* Learndash: Hide the Home link in breadcrumbs */
.breadcrumb-trail span:first-child a span {
display: none;
}
.breadcrumb-trail span:nth-child(2) {
display: none;
}