How to enable breadcrumbs in Pro similar to X defaults


I am wanting to enable breadcrumbs but using the breadcrumbs element in Pro does not place the breadcrumbs bar tight to the top or bottom sections in the page. I remember using X with breadcrumbs enabled and the breadcrumbs bar was always tight and clean to the top of the page. I’m wanting to mimic this same style.

Would also like to hide the breadcrumbs from primary pages such as home, contact, about, etc.

Thank you

Hi @z1z1z1,

Please share the page URL with breadcrumbs. The space on top or bottom of the breadcrumbs might not be coming from the element itself but rather on it’s container. We need to check your setup.

To hide it on those page, try adding the following css on Customize Tab > Element CSS:

.page-id-1 $el.x-crumbs,
.page-id-2 $el.x-crumbs,
.page-id-3 $el.x-crumbs {
    display: none;

Change 1/2/3 with your home/contact/about corresponding page id.

Hope this helps.

added secure note.

Hi @z1z1z1,

The extra space is coming from your global block section. Remove default 45px top and bottom padding. You can also set container to OFF if you want if fullwidth. Inspect ROW and set INNER CONTAINER to OFF to do it.

Hope this helps.

I am very sorry. Complete oversight and mistake on my part. Thank you for the great support and product.

Hi @z1z1z1,

I have removed the screencast as requested.