Docs

[M Pez]

How can I remove breadcrumbs from specific pages and posts?

[Christian]

Hey Pezatti,

That is not currently possible. 🙁

[Brian R]

You can remove them in the customizer under the header tab.

[Kory]

Hey Brian,

I believe what Michelle was wanting to do was exclude them from specific pages on a page by page basis, which is currently not possible with the theme. Thanks for chiming in though! 🙂

[Brian R]

Oh I see! 🙂

[Christian]

🙂

[Luke S]

This would be a great feature to add… i’m looking for something similar too.

When using certain backgrounds, the breadcrumb styling can appear almost unreadable, but it is a useful addition to have on pages/posts further down a complicated sitemap. Tough call on whether to turn off to save styling continuity, or leave on for good site usability?

[Christian]

Hey Luke,

Thank you for your feedback. We’ll note this as feature request and might implement it in a future release.

As of the moment, we don’t have a decision yet.

Please stay tuned and thank you for understanding.

[Armen T]

I was looking on here to see if it was possible to remove the breadcrumbs.

Having discovered this thread, obviously there’s not (currently). However, there is a solution.

Here is where the body class settings, which I requested a long time ago (and was added very quickly by the development team) can help.

Go the page where you want to remove breadcrumbs.

Under Page Settings you’ll see Body CSS Class. Put in anything to identify this page. In my case, I was making a charity page, so I put in ‘charity’.

Save and then go to your X Child Theme Editor and enter this in the CSS:

.charity .x-breadcrumb-wrap {display:none;}

Hit save and boom! The breadcrumbs will disappear from your page.

If you have a set of pages you want to remove this from, make the class something like ‘nobreadcrumbs’ and put that as the class in all the pages, and then one line of CSS will remove it from every page which has that class: .nobreadcrumbs .x-breadcrumb-wrap {display:none;}

Hope this helps!

[Alexander]

Nice post Armen! This is a great tutorial of how to do this. Another way you could go about this would be to use the existing body class for the post ID. You can view the page source to see it:

And the CSS:

body.postid-52 .x-breadcrumb-wrap { display:none;}

Keep in mind though that the actual HTML is still in the page. You’re just visually hiding it.

[M Pez]

I have been using this little plugin which allows you to insert custom css for a single post: http://wordpress.org/plugins/css-plus/
with this CSS: .x-breadcrumb-wrap { display: none; }

And to remove breadcrumbs from category pages I insert this into my child theme CSS file:
.category-recipes .x-breadcrumb-wrap { display: none; }
Here is an example of it in action: http://www.x4wp.com/category/recipes/

What I was originally trying to do was remove it from this home page: http://www.x4wp.com/

[Support]

Hey!

Thanks for sharing. That sure is useful. Noted.

[xtjoeywx]

Since Cornerstone and more X updates have been added, has this become easier to achieve?

[Thai]

Hi @xtjoeywx,

To locate the post / page ID, please take a look at this link: https://community.theme.co//kb/how-to-locate-post-ids/.

After that, you can simply add a small CSS under Customize > Custom > CSS:

.page-id-123 .x-breadcrumb-wrap {
display: none;
}

Hope it helps.

[agentnightingale]

Great that you have developed a way to exclude breadcrumbs on certain pages. I was wondering if its possible to do it the other way around – turn off breadcrumbs globally but turn on just for individual portfolio items?

Thanks

[Author]

Posts