Hide Category Breadcrumb from a specific category

Development

AI-generated summary

Hide Category Breadcrumb from a specific category

Sami_Syed wants to hide the entire Category Breadcrumb section from a specific category and provided a CSS code that didn’t work. Lilly suggested a different CSS code that targets the category breadcrumb and navigation bar:

.category-[category-slug] .category-breadcrumb,
.category-[category-slug] #navigation-bar {
    display: none;
}

However, Sami_Syed reported that this code didn’t work. Lilly discovered that the issue was due to the category being a sub-category and provided an updated code that separates the category and subcategory slugs with a “-”:

.category-van-life-summit-perks .category-breadcrumb,
.category-van-life-summit-perks #navigation-bar {
    display: none;
}

This updated code worked for Sami_Syed, who thanked Lilly for her help.

1

How can I hide the entire Category Breadcrumb section from a specific category?

I want to hide this entire section:

Screenshot 2023-06-24 214223
Screenshot 2023-06-24 2142231688×373 90.1 KB

I tried the following and it didn’t work:

body[class*='category-myCategorySlug-'] ol.category-breadcrumb li.tag-drop {
    display: none;
}
2

hi @Sami_Syed

those are the category breadcrumb dropdown and navigator bar (or nav bar).

to hide them, try this in common css:

.category-[category-slug] .category-breadcrumb,
.category-[category-slug] #navigation-bar {
    display: none;
}

if you want to include the navigation controls buttons as well (the admin wrench, new topic button and alerts button) you can do this:

.category-[category-slug] .navigation-container {
    display: none;
}
3

I tried this and it is not working.

Screenshot 2023-06-25 142920
Screenshot 2023-06-25 142920452×126 9.38 KB

Here is the URL to the category I am trying to remove it from. https://vanlifesummit2.discoursehosting.net/c/van-life-summit/perks/6

I have a separate theme component created, and it is active within the current theme.

4

oh it’s a sub-category. here you go:

.category-van-life-summit-perks .category-breadcrumb,
.category-van-life-summit-perks #navigation-bar {
    display: none;
}

separate category and subcategory slugs with a “-”

5

This worked. Thanks @Lilly

6

anytime :slight_smile: glad that helped.